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