[React, Tailwind CSS] input[type="number"]の矢印を消したいがそのやり方がわからない(ついでにUI/UXの相談も...)

前提・実現したいこと

右の上下矢印を消したい
今、ReactのJSXの中のinputタグをTailwind CSSを使って修飾しています。

発生している問題

appearance-noneというクラス名があるようですがそれを当てても消えてくれません。

TailwindCSS
1<input
2  className="ml-3 bg-input color-input p-3.5 rounded-3xl outline-none border-none text-lg appearance-none"
3  type="number"
4/>

代わりの案として、このコンポーネントにimportしているcssファイルを使ってクラスをあてることもできると思います。

TrainingInputTsx
1import styles from "./TrainingInput.module.scss";

TrainingInputModuleScss
1.no-spin::-webkit-inner-spin-button,
2.no-spin::-webkit-outer-spin-button {
3    -webkit-appearance: none;
4    margin: 0;
5    -moz-appearance:textfield;
6}

単純にそれだけを当てるとうまくいくのですが、既存のTailwind CSSのクラス名前と併用して書こうとするとエラーになり、どう書けばいいかわからず困っています。
またもし可能なのであれば、Tailwind CSSの設定ファイルを編集して、appearance-noneをカスタマイズすることでも実現できそうな気がしています。
いずれの方法についても調べてみたのですが、情報が見つけられませんでした。

UI/UXについて

合わせて相談なのですが、このようなnumberタイプのinputはUI/UXの観点で避けるべきでしょうか？
用途は筋トレ記録の作成フォームでして、トレーニングの回数（レップ数）の入力を想定しています。
なので1~100くらいの数字が入るだろうと思います。
もしセレクトタグを使う場合、100個以上の選択肢を縦にズラッと表示させるのもどうかと思い、現在手入力で受け付けるようにしています。
僕自身あまりみたことがないので不安です。アドバイスいただけると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

過去にissueで上がってますね。numberタイプのspinnerに関してappearance-noneが適応されるようにする予定はないと言ってます。ここでも提案されてる通り独自ユーティリティを作って対応するのがいいかと思います。
https://github.com/tailwindlabs/tailwindcss/issues/1101

UI/UXについてですが、numberタイプ使ってる場所なんて山ほどあります。よくnumberはUXがあかんみたいな話がありますが、理由が全角数字が打てないとかの問題です。サーバー側でのバリデーションはどちらにせよ必要になります。
正直一長一短なので好みかとも思いますが、React使うなら、リアクティブにバリデーションしてメッセージ出すところが多いので、textタイプで数値の強制はバリデーション側に任せるのがいいのかなぁ

投稿2021/02/24 08:18

編集2021/02/24 08:19