質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.12%

autocomplete に対して :placeholder-shown がきかない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 69

mypt

score 160

フローティングラベルサンプル 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なしの状態(正常)
デバッグCSSなしの状態
ページ再読み込み直後(異常)
ページ再読み込み直後
ページ内のどこかをクリック後(正常)
ページ内のどこかをクリック後(正常)
仮に何かJSが悪さしてるとしても input => label は HTML 上では連続しているので
& ~ label で & 部分の CSS が反映されるのに ~ label だけが反映されない理由
また画面クリックするだけで反映される理由がわからないのです

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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 疑似クラスは、 <input> 要素の値がブラウザーによって自動補完されている時に一致します。
:-webkit-autofill - CSS: カスケーディングスタイルシート | MDN

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/01 11:41

    ありがとうございます! おかげさまで読み込み直後も綺麗に表示できるようになりました

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる