body {
    --border: 1px;
    --height: calc( 1em + 2px); /* for margin */
    --width: 4ch;
}

.inputnumber {
    display: inline-block;
    width: var(--width);
    background-color: whitesmoke;
    height: calc(var(--border) + var(--border) + var(--height));
    border: var(--border) solid gray;
    position: relative;
    margin: 0 calc(var(--height) + 4px) !important; /* margin to cover space for before/after */
    text-align: center;
}

.inputnumber:after {
    content: "";
    display: inline-block;
    width: var(--height);
    height: var(--height); 
    position: absolute;
    left: calc( 2px + var(--width));
  /*  top: var(--offset); */
    background-image: url(green-add.svg);
    background-size: var(--height) var(--height);
}

.inputnumber:before {
    content: "";
    display: inline-block;
    width: var(--height);
    /* difference is border width */
    height: var(--height);
    position: absolute;
    left: calc(-1 * calc(4px + var(--height))); 
    top: 0;
    background-image: url(red-minus.svg);
    background-size: var(--height) var(--height);
}