A: фокус в пределах обходного пути для края

Question

В настоящее время я использую псевдо-селектор: focus-inside в chrome, однако в соответствии с 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

Как я могу сделать: фокус в кросс-браузер?

Answer 1

Пара вещей.Во-первых, «обходной путь», который вы цитируете, на самом деле не эквивалентен :focus-within, поскольку результирующие правила применяются к элементу <input>.Вы можете так же легко сделать

input:focus {
    /* rules here */
}

, не заботясь о специальных классах.Настоящий :focus-within псевдокласс позволяет вам определять правила, которые применяются к содержащему элементу, не * <input>

Но если конкретный обходной путь действительно полезен для вас, вы 'Вам нужно будет разбить ваши правила на отдельные блоки.Это потому, что браузеры молча игнорируют любой CSS, который они не понимают.Поэтому, когда Edge видит

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

, он замечает, что существует псевдокласс, который он не понимает (:focus-within), поэтому он игнорирует весь блок правил, как вы заметили.Если вы разделите правила на два блока, Edge будет игнорировать только блок, который он не понимает.

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

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