web-dev-qa-db-ja.com

CSS：子のフォーカスで親を変更

次のようなものがあるとしましょう：

<div class="parent">
    <input class="childInput" type="text" />
    <div class="sibling"></div>
</div>

子がフォーカスを受け取ったときに親/兄弟の外観を変更したい。このようなことを行うためのCSSのトリックはありますか？

編集：

私の質問の理由は次のとおりです。

編集可能なテキストフィールドを必要とするAngularアプリを作成しています。クリックするまでラベルのように見えるはずです。クリックすると、通常のテキスト入力のように見えます。 ：focusに基づいてこの効果を実現しますが、テキストはテキスト入力の境界によって切り取られます。また、ng-show、ng-hide、ng-blur、ng-keypress、ng-clickを使用してラベルとテキストを切り替えました。ぼかし、キーの押下、クリックに基づいた入力。これは、1つの点を除いて問題なく機能しました。ラベルのng-click = "setEdit（this、$ event）"がng-showとng-hideで使用される編集ブール値をtrueテキスト入力の.select（）へのjQuery呼び出しを使用しますが、ng-clickが完了するまですべてが$ digest'dされないため、テキスト入力は再びフォーカスを失います。 ng-blurを使用してラベルを表示するように戻すにはバグがあります。ユーザーはテキスト入力をクリックし、再度クリックしてラベルの表示に戻す必要があります。

編集：

この問題の例は次のとおりです。 http://plnkr.co/edit/synSIP?p=preview

javascripthtmlcssangularjsfocus
37
AaronF

これを純粋な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 type="email" 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>
99
J J B

CSSでこれを行う方法はありません。 CSSは兄弟、子供などのみをスタイルでき、親はスタイルできません。

次のように単純にJSを使用できます。

<style>
.parent {background: green}
.focused {background: red;}
</style>
<div class="parent">
    <input class="childInput" type="text" />
    <div class="sibling"></div>
</div>

<script>
$('.parent > *')
    .focus(function() {
        $('.parent').addClass('focused');
    })
    .blur(function() {
        $('.parent').removeClass('focused');
    });
</script>

http://jsfiddle.net/C4bZ6/

このコードは、.parentのすべての直接の子を取り、それらの1つにフォーカスすると、クラスfocusedが親に追加されます。ぼかしでは、このクラスは削除されます。

5
panther

純粋なCSSを使用して、テキスト入力がフォーカスされていない限り、テキスト入力ではないように見せることができます。

http://jsfiddle.net/michaelburtonray/C4bZ6/13/

input[type="text"] {
    border-color: transparent;
    transition-duration: 600ms;
    cursor: pointer;
    outline-style: none;
    text-overflow: Ellipsis;
}

input[type="text"]:focus {
    border-color: initial;
    cursor: auto;
    transition-duration: 300ms;
}
1
Michael

Contenteditible属性を試してください。ただし、これを使用可能なフォームデータに変換するには、さらに作業が必要になる場合があります。

http://jsfiddle.net/michaelburtonray/C4bZ6/20/

<span class="parent" contenteditable>Click me</span>
1
Michael