样式化 HTML5 数字输入

Question

是否可以将默认 HTML5 input type="number" 设置为如下所示：

或者我是否必须为“箭头”使用其他元素？找不到它们的 CSS 选择器。

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

Answer 1

你不能。表单字段由底层 chrome 绘制（意思是浏览器/操作系统组合）。他们没有 CSS 选择器。

如果你喜欢自己的风格。您必须在原始输入前面创建一些新元素（或隐藏输入并将新元素放置到位）。此元素将以某种方式与 JavaScript 一起使用，并始终更新输入字段的值。