样式化HTML5数字输入 [英] Styling HTML5 number input

问题描述

是否可以设置默认HTML5 input type ="number" 的样式，使其看起来像这样:

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

还是我必须对箭头"使用其他元素?找不到它们的CSS选择器.

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;
}

推荐答案

您不能.表单字段由底层镶边(表示浏览器/操作系统组合)绘制.他们没有CSS选择器.

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

如果您想拥有自己的风格.您必须在原始输入的前面添加一些新元素(或隐藏输入并将该新元素放置在适当的位置).该元素将以JavaScript的某种方式工作，并始终更新输入字段的值.

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.

这篇关于样式化HTML5数字输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！