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

【问题标题】：input type number hide arrows from right part of input输入类型编号从输入的右侧隐藏箭头
【发布时间】：2015-02-04 11:33:52
【问题描述】：

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

如何设置第一个不带箭头和第二个带箭头？

【问题讨论】：

现在你可以使用 youtu.be/alGcULGtiv8?t=630

标签： javascript jquery html css

【解决方案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>

【讨论】：

输入[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none;边距：0； } 输入[类型=数字] { -moz 外观：文本字段； }

【解决方案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; 
}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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; 
}

【讨论】：

【解决方案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。

【讨论】：