Customizing Increment Arrows on Input of Type Number Using CSS

Question

I have an input of type number that is rendered using the following code:

Answer 1

I found a nice solution. Just rotate the arrow keys and set the opacity to 0. (they are now in the right place, invisible but clickable) Then set an :after and :before element over these invisible buttons. These elements can then be styled as desired.

HTML

CSS

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    transform: rotate(90deg);
    height: 80px;
    opacity: 0;
}

.quantity-wrapper {
    position: relative;
}

.quantity-wrapper:after {
    content: "+";
    position: absolute;
    right: 5px;
    height: 100%;
    top: 8px;
    pointer-events: none;
}

.quantity-wrapper:before {
    content: "-";
    position: absolute;
    left: 5px;
    height: 100%;
    top: 8px;
}