我有一個輸入類型的數字，我想在默認情況下刪除箭頭，我怎樣才能用tailwindCSS做到這一點，我尋找它，發現沒有解決問題。

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

So i found the solution for this -> On your global.css you have to add

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

補充一下@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的兼容性

ref w3schools/how to/how to _ CSS _ hide _ arrow _ number

我發現了一種純類的方式來做到這一點，既適用于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 將它添加到您的tailwind config.js中，并作為普通的tailwind類使用。

您可以嘗試使用選擇組件，輸入沒有箭頭。

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

這里有順風的鏈接，你可以看一下 順風

對于普通的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"
/>

要刪除箭頭，您需要將外觀設置為無(source[https://www . w3schools . com/how to/how to _ CSS _ hide _ arrow _ number . ASP])

如果你使用TailwindCSS 3，你可以試試這個:https://tailwindcss.com/docs/appearance,如果你使用TailwindCSS 2，這個:https://v2.tailwindcss.com/docs/appearance.

我希望這能解決你的問題。

關于順風，你可以搜索& quot外觀-無& quot

https://tailwindcss.com/docs/appearance

這移除了不同輸入類型的默認插件行為。