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