提问人：Tyron 提问时间：2/28/2022 更新时间：10/23/2023 访问量：57544
如何使用 Tailwind CSS 删除输入类型数字上的箭头
How to Remove Arrow on Input type Number with Tailwind CSS
问：
我有一个输入类型编号，我想默认删除箭头，我怎样才能用 tailwindCSS 做到这一点，我寻找它，但没有发现任何问题。
input type="number" placeholder="Numéro de téléphone" className="border p-4 outline-none"
答：
-3赞
C. van Ruitenbeek
2/28/2022
#1
要删除需要设置为 （source[https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp]） 的箭头appearancenone
如果你使用 TailwindCSS 3，你可以试试这个： https://tailwindcss.com/docs/appearance，如果你使用 TailwindCSS 2，这个： https://v2.tailwindcss.com/docs/appearance。
我希望这能解决您的问题。
评论
0赞
Heechul Ryu
3/29/2023
appearance-none对我不起作用，而是对我有用 - stackoverflow.com/a/71745933/1570165（适用于 Firefox，但不适用于 Chrome）type="number"[appearance:textfield]
-1赞
saad
2/28/2022
#2
<input type="number" placeholder="Numéro de téléphone" className="border p-4
outline-none appearance-none" />
这与 Tailwind 这里有一个链接，你可以在上面查看 Tailwind
并使用普通的 CSS：
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>
<input
type="number"
placeholder="Numéro de téléphone"
className="border p-4
outline-none"
/>
88赞
Tyron
2/28/2022
#3
所以我找到了这个解决方案->在您的全局上.css您必须添加
@layer base {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
评论
0赞
Tyron
9/14/2022
Thx 指定代码 Zack
2赞
Paulliano
9/24/2022
这对我不起作用
0赞
NickW
5/12/2023
也不适合我：/
0赞
Muh Ghazali Akbar
12/1/2023
它正在工作，谢谢！
0赞
Surya
12/21/2023
这适用于 Firefox 吗？
37赞
RicardoVallejo
10/12/2022
#4
添加到@Tyron答案中，这是正确的。
@layer base {
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button,
input[type='number'] {
-webkit-appearance: none;
margin: 0;
-moz-appearance: textfield !important;
}
}
添加对 Mozilla 的兼容性
参考文献 W3Schools/Howto/howto_css_hide_arrow_number
评论
3赞
Sauer Voussoir
10/13/2022
@Tyron对我不起作用，这个对我有用。谢谢！
-3赞
Just a Dude
1/5/2023
#5
对于 Tailwind，您可以搜索“appearance-none”
https://tailwindcss.com/docs/appearance
这删除了不同输入类型的默认插件行为。
评论
1赞
alepaff
2/20/2023
不再工作
6赞
Otavio anovazzi
3/7/2023
#6
/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
require("@tailwindcss/forms")({
strategy: 'class', // only generate classes
}),
plugin(function ({ addUtilities }) {
addUtilities({
'.arrow-hide':{
'&::-webkit-inner-spin-button':{
'-webkit-appearance': 'none',
'margin': 0
},
'&::-webkit-outer-spin-button':{
'-webkit-appearance': 'none',
'margin': 0
},
}
}
)
})
],
}
将其添加到您的顺风中，并用作普通的顺风类。config.js
评论
0赞
antonitor
11/6/2023
您还可以添加 '-moz-appearance'： 'textfield ！important' 以便在 Firefox 中工作，就在 '.arrow-hide' 关闭之前
47赞
Heechul Ryu
3/29/2023
#7
发现了一种适用于 Firefox 和 Chrome 的纯类方法来执行此操作
<input
type="number"
class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
/>
感谢这些参考资料：
- https://stackoverflow.com/a/71745933/1570165
- 我可以隐藏 HTML5 数字输入的旋转框吗？
- https://github.com/tailwindlabs/tailwindcss/discussions/6972
评论
2赞
Carlo Nyte
11/20/2023
了不起！谢谢你！
4赞
Arun Jenson
4/11/2023
#8
[-moz-appearance:_textfield] [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none
评论
0赞
Kuza Grave
4/14/2023
#9
您可以尝试使用 select 组件，输入没有箭头。
<select type="number" id="amount" name="amount">
<option value="0">0</option>
</select>
适合所有选择的解决方案
@layer base {
select {
appearance: none !important;
}
}
针对特定类型的解决方案
@layer base {
select[type='number'] {
appearance: none !important;
}
}
使用 CDN
<style type="text/tailwindcss">
@layer base {
select[type='number'] {
appearance: none !important;
}
}
</style>
0赞
Rizal Iswandy
10/23/2023
#10
我将其添加到我的全局 .css 中以隐藏特定类名中的箭头：
.hide-arrow[type="number"]::-webkit-inner-spin-button,
.hide-arrow[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
评论