如何使用css把input框的number属性的右侧小按钮去掉
warning:
这篇文章距离上次修改已过432天，其中的内容可能已经有所变动。
要去除input框类型为number时的右侧小按钮，可以通过CSS的appearance属性进行设置。将appearance设置为none可以去除这些默认的UI元素。
下面是一个简单的CSS样式，用于去除input类型为number时的小按钮：
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield; /* Firefox */
}这段CSS样式主要针对Webkit内核的浏览器（如Chrome、Safari）以及Firefox浏览器。在Webkit内核的浏览器中，通过设置::-webkit-inner-spin-button和::-webkit-outer-spin-button的appearance为none去除增减按钮，同时设置边距为0以确保没有额外的空间。在Firefox中，通过设置appearance为textfield来去除这些按钮。
请注意，不是所有浏览器都支持appearance属性，因此你可能需要写一些兼容不同浏览器的CSS。
评论已关闭