次のようなものがあるとします。
<div class="parent">
<input class="childInput" type="text" />
<div class="sibling"></div>
</div>
子がフォーカスを受け取ったときに親/兄弟の外観を変更したいです。このようなことを行うための CSS のトリックはありますか?
私の質問の理由は次のとおりです。
編集可能なテキスト フィールドが必要な Angular アプリを作成しています。クリックされるまではラベルのように見えますが、クリックすると通常のテキスト入力のように見えるはずです。:focusこの効果を実現するために、テキスト フィールドを に基づいてスタイル設定しましたが、テキストがテキスト入力の境界によって切り取られてしまいます。
またng-show、、、、を使用してng-hide、ぼかし、キーの押下、クリックに基づいてラベルとテキスト入力を切り替えましたng-blur。ng-keypressng-click
これは、1 つの点を除いては正常に動作しました。ラベルが と で使用される編集ブール値を true に変更した後、ng-click="setEdit(this, $event)"テキスト入力に対して jQuery 呼び出しを使用します。ただし、 の完了後まですべてが'd されないため、テキスト入力は再びフォーカスを失います。ng-showng-hide.select()ng-click$digest
テキスト入力は実際にはフォーカスを受け取らないため、 を使用してng-blurラベルの表示に戻すのはバグがあります。ラベルの表示に戻すには、ユーザーはテキスト入力をクリックしてから、もう一度テキスト入力外をクリックする必要があります。
編集:
問題の例を次に示します。http://plnkr.co/edit/synSIP?p=preview
ベストアンサー1
これを純粋な CSS で実行できるようになったため、JavaScript は必要ありません。
新しい CSS 疑似クラスは:focus-withinこのような場合に役立ち、スクリーン リーダーを使用するときによく使用されるタブ移動を使用する際のアクセシビリティにも役立ちます。
.parent:focus-within {
border: 1px solid #000;
}
:focus-within 疑似クラスは、それ自体が :focus に一致する要素、または :focus に一致する子孫を持つ要素に一致します。
使ってもいいですか...
どのブラウザがこれをサポートしているかは、次のサイトをご覧ください。http://caniuse.com/#search=focus-within
デモ
fieldset {
padding: 0 24px 24px !important;
}
fieldset legend {
opacity: 0;
padding: 0 8px;
width: auto;
}
fieldset:focus-within {
border: 1px solid #000;
}
fieldset:focus-within legend {
opacity: 1;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<fieldset>
<legend>Parent Element</legend>
<div class="form-group">
<label for="name">Name:</label>
<input class="form-control" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</fieldset>
</form>
</div>