输入类型数字隐藏输入右侧的箭头

input type number hide arrows from right part of input

本文关键字：输入 类型 数字 隐藏      更新时间：2023-09-26

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

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

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

 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>

您可以简单地在输入中添加一个类

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

大多数答案都是面向webkit的。这是包括火狐在内的大多数浏览器的解决方案。

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

多核

在

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

尝试使用 :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; 
}

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

并更新您的 css，例如：

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

JsFiddle 示例

或者按照其他回答者的建议为"首次输入"添加class。

相关文章：