質問: フローティングラベルサンプル for Bootstrap · Bootstrap Rails 上でこれと同じフローティングラベルを動かしたいと思ってるんですが ページを表示した瞬間以下のようにラベルにだけスタイルが当たりません ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/66cd8be1bd5bb6f9c33264daf1ed98d8.png) 出力されているHTMLは以下で ``` メールアドレス ``` 原因を探るために 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なしの状態(正常)** ![デバッグCSSなしの状態](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/1f2d6325bada61c87ba60cf311d63045.png) **ページ再読み込み直後(異常)** ![ページ再読み込み直後](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/44a342bd171b64d495aaf817b38f0864.png) **ページ内のどこかをクリック後(正常)** ![ページ内のどこかをクリック後(正常)](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/cd5ab510384c39462b20ec1af9b009cb.png) 仮に何かJSが悪さしてるとしても input => label は HTML 上では連続しているので & ~ label で & 部分の CSS が反映されるのに ~ label だけが反映されない理由 また画面クリックするだけで反映される理由がわからないのです
回答: Firefoxでは問題なく動作していたので、主にChromeの問題かと思います。(Safariは未確認) ご希望の通りではないでしょうけれど、こちらはいかがですか。 ``` .form-label-group input:-webkit-autofill { padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3)); padding-bottom: calc(var(--input-padding-y) / 3); } .form-label-group input:-webkit-autofill ~ label { padding-top: calc(var(--input-padding-y) / 3); padding-bottom: calc(var(--input-padding-y) / 3); font-size: 12px; color: #777; } ``` > > CSS の :-webkit-autofill 疑似クラスは、 要素の値がブラウザーによって自動補完されている時に一致します。 > > :-webkit-autofill - CSS: カスケーディングスタイルシート | MDN > > >