質問編集履歴
8
質問内容の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
[フローティングラベルサンプル for Bootstrap · Bootstrap](https://getbootstrap.jp/docs/4.5/examples/floating-labels/)
|
|
2
2
|
|
|
3
3
|
|
|
4
|
+
|
|
5
|
+
Rails 上でこれと同じフローティングラベルを動かしたいと思ってるんですが
|
|
6
|
+
|
|
7
|
+
ページを表示した瞬間以下のようにラベルにだけスタイルが当たりません
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
出力されているHTMLは以下で
|
|
4
14
|
|
|
5
15
|
```
|
|
6
16
|
|
|
@@ -14,9 +24,9 @@
|
|
|
14
24
|
|
|
15
25
|
```
|
|
16
26
|
|
|
17
|
-
|
|
27
|
+
原因を探るために
|
|
18
28
|
|
|
19
|
-
SCSS をデバッグ用に以下のように border や背景に色をつける
|
|
29
|
+
SCSS をデバッグ用に以下のように border や背景に色をつけるだけにしました
|
|
20
30
|
|
|
21
31
|
```
|
|
22
32
|
|
7
質問内容の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -92,6 +92,6 @@
|
|
|
92
92
|
|
|
93
93
|
仮に何かJSが悪さしてるとしても input => label は HTML 上では連続しているので
|
|
94
94
|
|
|
95
|
-
& ~ label で & 部分の CSS が反映されるのに ~ label だけが反映されない理由
|
|
95
|
+
& ~ label で & 部分の CSS が反映されるのに ~ label だけが反映されない理由
|
|
96
96
|
|
|
97
|
-
画面クリックするだけで反映される理由
|
|
97
|
+
また画面クリックするだけで反映される理由がわからないのです
|
6
質問内容の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -78,11 +78,17 @@
|
|
|
78
78
|
|
|
79
79
|
---
|
|
80
80
|
|
|
81
|
+
**デバッグCSSなしの状態(正常)**
|
|
82
|
+
|
|
81
83
|
|
|
84
|
+
|
|
85
|
+
**ページ再読み込み直後(異常)**
|
|
82
86
|
|
|
83
87
|
|
|
84
88
|
|
|
89
|
+
**ページ内のどこかをクリック後(正常)**
|
|
90
|
+
|
|
85
|
-
|
|
86
92
|
|
|
87
93
|
仮に何かJSが悪さしてるとしても input => label は HTML 上では連続しているので
|
|
88
94
|
|
5
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -78,13 +78,11 @@
|
|
|
78
78
|
|
|
79
79
|
---
|
|
80
80
|
|
|
81
|
+
|
|
81
82
|
|
|
83
|
+
|
|
82
84
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
ページ再読み込み直後が上の状態でページ内のどこかをクリックすると以下のようになります
|
|
86
|
-
|
|
87
|
-
|
|
88
86
|
|
|
89
87
|
仮に何かJSが悪さしてるとしても input => label は HTML 上では連続しているので
|
|
90
88
|
|
4
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -73,3 +73,21 @@
|
|
|
73
73
|
|
|
74
74
|
|
|
75
75
|
MAC OS 上の chrome 最新版(83.0.4103.116) です
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
ページ再読み込み直後が上の状態でページ内のどこかをクリックすると以下のようになります
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
仮に何かJSが悪さしてるとしても input => label は HTML 上では連続しているので
|
|
90
|
+
|
|
91
|
+
& ~ label で & 部分の CSS が反映されるのに ~ label だけが反映されない理由と
|
|
92
|
+
|
|
93
|
+
画面クリックするだけで反映される理由もよくわかりません
|
3
質問内容の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -64,9 +64,9 @@
|
|
|
64
64
|
|
|
65
65
|
|
|
66
66
|
|
|
67
|
-
なので input の CSS が
|
|
67
|
+
なので input の CSS が反映されれば
|
|
68
68
|
|
|
69
|
-
input ~ label
|
|
69
|
+
input ~ label も反映しなければおかしいはずで
|
|
70
70
|
|
|
71
71
|
ブラウザの挙動がおかしいとしか思えないのですが原因がわかる方いらっしゃらないでしょうか
|
|
72
72
|
|
2
質問内容の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
一部認識に間違いがあったので修正及び追記しました
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
1
5
|
```
|
|
2
6
|
|
|
3
7
|
<div class="form-label-group">
|
1
質問内容の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
Rails でこのようなHTMLが出力され、
|
|
14
14
|
|
|
15
|
-
SCSS をデバッグ用に以下
|
|
15
|
+
SCSS をデバッグ用に以下のように border や背景に色をつけるようにしたのですが
|
|
16
16
|
|
|
17
17
|
```
|
|
18
18
|
|
|
@@ -22,7 +22,15 @@
|
|
|
22
22
|
|
|
23
23
|
&:not(:placeholder-shown) {
|
|
24
24
|
|
|
25
|
+
border: 1px solid #0f0;
|
|
26
|
+
|
|
27
|
+
& ~ label {
|
|
28
|
+
|
|
29
|
+
border: 1px solid #f00;
|
|
30
|
+
|
|
25
|
-
color: #f
|
|
31
|
+
background-color: #fee;
|
|
32
|
+
|
|
33
|
+
}
|
|
26
34
|
|
|
27
35
|
}
|
|
28
36
|
|
|
@@ -34,19 +42,29 @@
|
|
|
34
42
|
|
|
35
43
|
画面を更新してオートコンプリート設定で値が表示される（=プレースホルダーが表示されてない）
|
|
36
44
|
|
|
37
|
-
|
|
45
|
+
状態で input のボーダーの色は変わったのですが
|
|
38
46
|
|
|
47
|
+
input ~ label で指定されるラベルの CSS が反映されず
|
|
48
|
+
|
|
39
|
-
画面のどこか１箇所（フォームとは関係ない場所）でもクリックすると色が変わります
|
|
49
|
+
画面のどこか１箇所（フォームとは関係ない場所）でもクリックすると反映されて色が変わります
|
|
40
50
|
|
|
41
51
|
|
|
42
52
|
|
|
43
|
-
１度でも画面に振れれば以降は正常なのですが最初だけCSSが反映されず、
|
|
44
|
-
|
|
45
|
-
また auto-complete ではなく value をセットすると最初から正常に
|
|
53
|
+
また auto-complete ではなく value をセットすると最初から正常に色が変わります
|
|
46
54
|
|
|
47
55
|
|
|
48
56
|
|
|
57
|
+
JSはjquery と bootstrap を読み込んでいるだけでまだ何も仕込んでおらず
|
|
58
|
+
|
|
59
|
+
CSSやクラスを変更するようなギミックも HTML の構造を変化させるようなギミックも存在しません
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
なので input の CSS が変化されれば
|
|
64
|
+
|
|
65
|
+
input ~ label の変化しなければおかしいはずで
|
|
66
|
+
|
|
49
|
-
ブラウザの挙動がおかしいとしか思えないのですが
|
|
67
|
+
ブラウザの挙動がおかしいとしか思えないのですが原因がわかる方いらっしゃらないでしょうか
|
|
50
68
|
|
|
51
69
|
|
|
52
70
|
|