"你可以使用以下 CSS 样式来去掉 type=\"number\" 输入框尾部的箭头:
input[type=\"number\"]::-webkit-inner-spin-button,
input[type=\"number\"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
这段代码使用了 CSS 伪元素 ::-webkit-inner-spin-button 和 ::-webkit-outer-spin-button 来选择 type=\"number\" 输入框的内部和外部旋转按钮。通过将 -webkit-appearance 属性设置为 none,我们可以隐藏这些按钮。同时,将 margin 属性设置为 0 可以确保按钮不占据额外的空间。
这个解决方法使用了 WebKit 浏览器的私有前缀 -webkit-,因此只能在支持 WebKit 内核的浏览器中生效,比如 Chrome 和 Safari。如果你需要在其他浏览器中也生效,你可以添加相应的私有前缀。
下面是一个完整的示例,你可以将上述 CSS 代码放入 <style> 标签中,或者将其放入外部 CSS 文件中,并在 HTML 中引入该文件:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=\"number\"]::-webkit-inner-spin-button,
input[type=\"number\"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>
</head>
<body>
<input type=\"number\" />
</body>
</html>
通过使用上述 CSS 样式,你可以去掉 type=\"number\" 输入框尾部的箭头,使其看起来更加符合你的设计需求。"