CSS: how to change input type number background color?-CodePudding

Im trying to change the arrows in the input type number:
background-color: 282930
arrows color: 666666
Only that but i was searching and i didn't find a way to do only that.
Image html and css example:

Here is my code:

.number {
    background-color: #282930;
    border: 1px solid #666666;
    color: #FFFFFF;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 11px;
    width: 50px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    margin: 0;
}

<div>
    <input  type="number" value="42">
</div>

Thanks.

CodePudding user response：

There is no reliable way of changing the style of the arrows on a number input. At least not with keeping cross browser compatibility in mind. Each browser also has its own implementation of them.

The best approach for this is to hide the arrows all together with:

input[type='number'] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

You can then add and style your own <button type="button"></button> elements. The increment and decrement functionality which should execute when clicking the buttons must be implemented via JavaScript.

CodePudding user response：

As far as I know you can't change them using CSS but you can use buttons to replace them.

I think chrome has some abilities in this case but it's not reliable.