将输入类型设置为数字时，隐藏数字输入框右侧的箭头

Question

我有两个类型为数字的输入框：

<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/

如何设置第一个输入框无箭头，第二个输入框有箭头？

- Alex

---

现在你可以使用 <input inputmode="numeric" .. - Suresh Kumar

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>

- dfsq

---

输入[type=number] ::-webkit-inner-spin-button， 输入[type=number] ::-webkit-outer-spin-button { -webkit外观：没有; 边距：0; }输入[type=number] { -moz外观：textfield; } - Wasim Khan

好的！这是它，附有Chrome，Safari，Edge，Opera和Firefox的演示缩进。 - aloisdg

Answer 2

大多数答案都是基于 WebKit 的。这里有一个适用于包括 Firefox 在内的大多数浏览器的解决方案。

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

<input type="number" value="1" />

MDN

- aloisdg

Answer 3

您可以简单地为您的输入添加一个类。

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

- DannielR

Answer 4

尝试使用:first-of-type选择每个父元素中第一个<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; 
}

- napster3world

Answer 5

在你的元素上使用class属性，然后在CSS文件中进行设置： http://jsfiddle.net/weujr6us/

- Codringher

Answer 6

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

然后更新您的CSS：

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

JsFiddle 示例

或者像其他回答者建议的那样，为第一个输入添加class。

- demo