如何使用 Tailwind CSS 删除输入类型 Number 上的箭头

Question

我有一个数字类型的输入，我想删除默认情况下附带的增量/减量箭头。我如何使用 Tailwind CSS 做到这一点？我查了一下，但没有发现任何可以解决这个问题的方法。

\n

\n input type="number" placeholder="Num\xc3\xa9ro de t\xc3\xa9l\xc3\xa9phone" className="border p-4 Outline-none"\n

\n

Answer 1

所以我找到了这个问题的解决方案 - >在你的 global.css 上你必须添加

@layer base {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

Answer 2

发现了一种纯类方法来做到这一点，适用于 Firefox 和 Chrome

\n

<input\n  type="number"\n  class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" \n  />\n

\n

感谢这些参考资料：

\n

\n
• /sf/answers/5022215341/
\n
• 我可以隐藏 HTML5 数字输入\xe2\x80\x99s 旋转框吗？
\n
• https://github.com/tailwindlabs/tailwindcss/discussions/6972
\n

\n

Answer 3

添加到@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

Answer 4

/** @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并用作正常的顺风类别。