样式化HTML5数字输入

时间:2014-10-02 10:41:39

标签: css html5 input styles numbers

是否可以将默认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;
}

1 个答案:

答案 0 :(得分:0)

你不能。表单字段由underliyng chrome绘制(意味着浏览器/ OS组合)。他们没有CSS选择器。

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