web-dev-qa-db-ja.com

A：エッジのフォーカス内での回避策

私は現在、擬似セレクターを使用しています：chrome in-===）=ただし、 caniuse.com ではEdgeでは使用できませんそしてIE、私はそれのためのcodepenできちんとした 回避策 を見つけました：

.focus-within-class > input:focus

ただし、次のようなフォーカス内でそれを組み合わせます：

.focus-within > input:focus,
.focus-within:focus-within > input

edgeでは機能せず、次のソリューションはChromeでは機能しません。

.focus-within > input:focus

クロスブラウザ内でフォーカスを作成するにはどうすればよいですか？

cssgoogle-chromecss-selectorsmicrosoft-edge
7
Joss Bird

いくつかのこと。まず、引用する「回避策」は、:focus-within要素に適用される結果のルールであるため、実際には<input>と同等ではありません。同様に簡単にできます

input:focus {
    /* rules here */
}

特別なクラスを気にすることなく。実際の:focus-within疑似クラスを使用すると、収容要素に適用されるルールを定義できます。not<input>

ただし、特定の回避策があなたにとって有用である場合、ルールを別々のブロックに分割する必要があります。これは、ブラウザーが理解できないCSSを静かに無視するためです。エッジが見たとき

.focus-within > input:focus,
.focus-within:focus-within > input

理解できない擬似クラス（:focus-within）があることに気づくので、気づいたようにルールブロック全体を無視します。ルールを2つのブロックに分割すると、Edgeは理解できないブロックのみを無視します。

.focus-within > input:focus {
    /* rules here, which Edge will apply */
}

.focus-within:focus-within > input
    /* same rules here, which Edge will ignore */
}
13
Stephen Thomas