フローティングラベルサンプル for Bootstrap · Bootstrap
Rails 上でこれと同じフローティングラベルを動かしたいと思ってるんですが
ページを表示した瞬間以下のようにラベルにだけスタイルが当たりません
出力されているHTMLは以下で
<div class="form-label-group"> <input autocomplete="username" class="form-control" autofocus="autofocus" placeholder="メールアドレス" required="required" type="email" value="" name="user[email]" id="user_email"> <label for="user_email">メールアドレス</label> </div>
原因を探るために
SCSS をデバッグ用に以下のように border や背景に色をつけるだけにしました
.form-label-group { & input { &:not(:placeholder-shown) { border: 1px solid #0f0; & ~ label { border: 1px solid #f00; background-color: #fee; } } } }
画面を更新してオートコンプリート設定で値が表示される(=プレースホルダーが表示されてない)
状態で input のボーダーの色は変わったのですが
input ~ label で指定されるラベルの CSS が反映されず
画面のどこか1箇所(フォームとは関係ない場所)でもクリックすると反映されて色が変わります
また auto-complete ではなく value をセットすると最初から正常に色が変わります
JSはjquery と bootstrap を読み込んでいるだけでまだ何も仕込んでおらず
CSSやクラスを変更するようなギミックも HTML の構造を変化させるようなギミックも存在しません
なので input の CSS が反映されれば
input ~ label も反映しなければおかしいはずで
ブラウザの挙動がおかしいとしか思えないのですが原因がわかる方いらっしゃらないでしょうか
MAC OS 上の chrome 最新版(83.0.4103.116) です
デバッグCSSなしの状態(正常)
ページ再読み込み直後(異常)
ページ内のどこかをクリック後(正常)
仮に何かJSが悪さしてるとしても input => label は HTML 上では連続しているので
& ~ label で & 部分の CSS が反映されるのに ~ label だけが反映されない理由
また画面クリックするだけで反映される理由がわからないのです
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/01 02:41