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

pn9klfpd  于 2022-11-19  发布在  其他
关注(0)|答案(6)|浏览(152)

我有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/
如何设置第一个没有箭头和第二个有箭头?

idfiyjo8

idfiyjo81#

只需添加一些类来区分输入:
第一个

bksxznpy

bksxznpy2#

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

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

yacmzcpb3#

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

qrjkbowd

qrjkbowd4#

try with :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; 
}
jutyujz0

jutyujz05#

有很简单的解决办法:只需为第一个输入添加一些id,如<input type="number" id="FirstInput">
并更新您的CSS,例如:

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

JsFiddle example
或者按照其他回答者的建议,为第一个输入添加class

yzxexxkh

yzxexxkh6#

大多数的答案是面向webkit的。这里是一个解决方案,大多数浏览器,包括火狐。
第一个
MDN

相关问题