使用bootstrap时覆盖-moz -sperage
我在网站上使用Bootstrap版本5.2，并尝试摆脱数字输入字段中的箭头。因此，我将以下代码复制到我的CSS文件中：
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox TODO: why does this not work? */
input[type=number] {
-moz-appearance: textfield !important;
}
在Chrome中效果很好，但对Firefox没有影响。检查员显示以下属性：
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
彼此覆盖。要获得所需的行为，我必须删除该行
appearance: none;
，而不是将第二行更改为
-moz-appearance: textfield;
如何在CSS文件中实现这一目标？
I am using bootstrap version 5.2 on my website and try to get rid of the arrows in a number input field. Therefore i copied the following code to my css file:
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox TODO: why does this not work? */
input[type=number] {
-moz-appearance: textfield !important;
}
Which works perfectly fine in Chrome but has no effect in Firefox. The inspector shows the following attributes:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
which overwrite each other. To get the desired behaviour I have to remove the line
appearance: none;
and than change the second line to
-moz-appearance: textfield;
How can I achieve this in my css file?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论