Question

我有2个输入，型号为：

<input type="number">

http://jsfiddle.net/dkadr55g/1/

我想从右边隐藏箭头进行第一次输入，我找到了使用此代码的解决方案：

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

但如果使用此项，则所有输入都不会创建箭头

http://jsfiddle.net/dkadr55g/2/

如何设置第一个withoud箭头，第二个用箭头设置？

Answer 1

只需添加一些类来区分输入：

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

First number: <input type="number" class="no-spinner"><br>
Second number: <input type="number"><br>

Answer 2

您只需在输入中添加一个类

即可

Second number: <input class="without_number" type="number"><br>

比仅选择此类的字段：

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

Answer 3

使用class元素的input属性，而不是css文件中的{{1}}属性： http://jsfiddle.net/weujr6us/

Answer 4

尝试使用:first-of-type选择作为其父级的第一个<input>元素的每个<input>元素

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

Answer 5

有一个非常简单的解决方案：只需为第一个输入添加一些id，例如<input type="number" id="FirstInput">

并更新您的CSS，如：

#FirstInput::-webkit-inner-spin-button, 
    #FirstInput::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
     margin: 0; 
}

JsFiddle example

或者像其他回答者建议的那样为First Input添加class。

输入类型编号隐藏输入右侧的箭头

5 个答案: