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

Question

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

 input type="number" placeholder="Numéro de téléphone" className="border p-4 outline-none"

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 上使用，

<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

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
          },
        }
      }
      )
    })
  ],
}

将其添加到您的 tailwind config.js 中并用作普通的 tailwind 类。

Answer 5

[-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

Answer 6

我将其添加到我的 global.css 中以隐藏特定 className 中的箭头：

.hide-arrow[type="number"]::-webkit-inner-spin-button,
.hide-arrow[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

Answer 7

您可以尝试使用选择组件，输入没有箭头。

<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>

Answer 8

我将其添加到主 css 文件中以修复 tailwinds appearance-none 类：

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

    input[type="number"].appearance-none {
        -moz-appearance: textfield !important;
    }
}

Answer 9

<input type="number" placeholder="Numéro de téléphone" className="border p-4
outline-none appearance-none" />

这是顺风的，这里有一个链接，你可以看一下
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"
/>

Answer 10

要删除箭头，您需要将 appearance 设置为 none （来源[https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp]）

如果您使用 TailwindCSS 3你可以尝试这个： https://tailwindcss.com/docs/appearance，如果您使用 TailwindCSS 2，则：https://v2.tailwindcss.com/docs/appearance。

我希望这能解决您的问题。

Answer 11

对于 Tailwind，您可以搜索“appearance-none”

https://tailwindcss.com/docs/appearance

这删除了不同输入类型的默认插件行为。