質問編集履歴
4
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
type="number"
|
|
12
12
|
/>
|
|
13
13
|
```
|
|
14
|
-
代わりの案として、このコンポーネントにimportしているcssファイルを使ってクラスをあてることもできると思
|
|
14
|
+
代わりの案として、このコンポーネントにimportしているcssファイルを使ってクラスをあてることもできると思います。
|
|
15
15
|
```TrainingInputTsx
|
|
16
16
|
import styles from "./TrainingInput.module.scss";
|
|
17
17
|
```
|
|
@@ -23,12 +23,13 @@
|
|
|
23
23
|
-moz-appearance:textfield;
|
|
24
24
|
}
|
|
25
25
|
```
|
|
26
|
-
その
|
|
26
|
+
単純にそれだけを当てるとうまくいくのですが、既存のTailwind CSSのクラス名前と併用して書こうとするとエラーになり、どう書けばいいかわからず困っています。
|
|
27
|
-
またもし可能なのであれば、Tailwind CSSの設定ファイルを編集して、appearance-noneをカスタマイズすることでも実現できそう
|
|
27
|
+
またもし可能なのであれば、Tailwind CSSの設定ファイルを編集して、appearance-noneをカスタマイズすることでも実現できそうな気がしています。
|
|
28
|
-
いずれの方法についても調べてみたのですが、情報が見つけられませんでした
|
|
28
|
+
いずれの方法についても調べてみたのですが、情報が見つけられませんでした。
|
|
29
29
|
|
|
30
30
|
### UI/UXについて
|
|
31
31
|
合わせて相談なのですが、このようなnumberタイプのinputはUI/UXの観点で避けるべきでしょうか？
|
|
32
32
|
用途は筋トレ記録の作成フォームでして、トレーニングの回数（レップ数）の入力を想定しています。
|
|
33
|
+
なので1~100くらいの数字が入るだろうと思います。
|
|
33
|
-
|
|
34
|
+
もしセレクトタグを使う場合、100個以上の選択肢を縦にズラッと表示させるのもどうかと思い、現在手入力で受け付けるようにしています。
|
|
34
|
-
僕自身あまりみたことがないので不安です。
|
|
35
|
+
僕自身あまりみたことがないので不安です。アドバイスいただけると幸いです。
|
3
相談を追記
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
[React, Tailwind CSS] input[type="number"]の矢印を消したいがそのやり方がわからない
|
|
1
|
+
[React, Tailwind CSS] input[type="number"]の矢印を消したいがそのやり方がわからない(ついでにUI/UXの相談も...)
|
body
CHANGED
|
@@ -25,4 +25,10 @@
|
|
|
25
25
|
```
|
|
26
26
|
その場合既存のTailwind CSSのクラス名前とstyles.no-spinをどう組み合わせて書けばいいのでしょうか？
|
|
27
27
|
またもし可能なのであれば、Tailwind CSSの設定ファイルを編集して、appearance-noneをカスタマイズすることでも実現できそうです。
|
|
28
|
-
いずれの方法についても調べてみたのですが、情報が見つけられませんでした...
|
|
28
|
+
いずれの方法についても調べてみたのですが、情報が見つけられませんでした...
|
|
29
|
+
|
|
30
|
+
### UI/UXについて
|
|
31
|
+
合わせて相談なのですが、このようなnumberタイプのinputはUI/UXの観点で避けるべきでしょうか？
|
|
32
|
+
用途は筋トレ記録の作成フォームでして、トレーニングの回数（レップ数）の入力を想定しています。
|
|
33
|
+
なので1~100くらいの数字が入るだろうと思います。もしセレクトタグを使う場合、100個以上の選択肢を縦にズラッと表示させるのもどうかと思い手入力で受け付けるようにしています。
|
|
34
|
+
僕自身あまりみたことがないので不安です。
|
2
selectタグではなくinputタグでした
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
[React]
|
|
1
|
+
[React, Tailwind CSS] input[type="number"]の矢印を消したいがそのやり方がわからない
|
body
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
3
|
右の上下矢印を消したい
|
|
4
|
-
今、ReactのJSXの中の
|
|
4
|
+
今、ReactのJSXの中のinputタグをTailwind CSSを使って修飾しています。
|
|
5
5
|
|
|
6
6
|
### 発生している問題
|
|
7
7
|
appearance-noneというクラス名があるようですがそれを当てても消えてくれません。
|
|
8
8
|
```TailwindCSS
|
|
9
|
+
<input
|
|
9
|
-
|
|
10
|
+
className="ml-3 bg-input color-input p-3.5 rounded-3xl outline-none border-none text-lg appearance-none"
|
|
11
|
+
type="number"
|
|
12
|
+
/>
|
|
10
13
|
```
|
|
11
14
|
代わりの案として、このコンポーネントにimportしているcssファイルを使ってクラスをあてることもできると思うのですが
|
|
12
15
|
```TrainingInputTsx
|
1
編集
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -20,4 +20,6 @@
|
|
|
20
20
|
-moz-appearance:textfield;
|
|
21
21
|
}
|
|
22
22
|
```
|
|
23
|
-
その場合既存のTailwind CSSのクラス名前とstyles.no-spinをどう組み合わせて書けばいいのでしょうか？
|
|
23
|
+
その場合既存のTailwind CSSのクラス名前とstyles.no-spinをどう組み合わせて書けばいいのでしょうか？
|
|
24
|
+
またもし可能なのであれば、Tailwind CSSの設定ファイルを編集して、appearance-noneをカスタマイズすることでも実現できそうです。
|
|
25
|
+
いずれの方法についても調べてみたのですが、情報が見つけられませんでした...
|