Styling HTML5 number input

问题

Is it possible to style the default HTML5 input type="number" to look something like this:

Or do I have to use additional elements for the 'arrows'? Couldn't find the CSS selectors for them.

JsFiddle

HTML:

<input class="qnt amount" name="qnt" min="1" max="100" type="number" value="1">

CSS:

input{
    display:block;
    margin-top:12px;
    text-align:center;
    width:125px;
    height:30px;
    outline:1px solid black;
    border:none;
}

回答1:

You can't. Form fields are drawn by the underliyng chrome (meaning browser/OS combination). They don't have CSS selectors.

If you like to have your style. you have to make some new element in front of the original input (or hide the input and put that new element in place). This element will work in some way with JavaScript and always updates the value of the input field.

来源：https://stackoverflow.com/questions/26159135/styling-html5-number-input