Css псевдокласи введення: не (відключено) не: [type = “submit”]: фокус

138

Я хочу застосувати деякий css для елементів вводу, і я хочу це зробити лише для входів, які не вимкнені і не надсилають тип, нижче css не працює, можливо, якщо хтось може мені пояснити, як це потрібно додати.

input:not(disabled)not:[type="submit"]:focus{
box-shadow:0 0 2px 0 #0066FF;
-webkit-box-shadow:0 0 4px 0 #66A3FF;
}

css css-selectors pseudo-class

— BurebistaRuler
джерело

285

Замість:

input:not(disabled)not:[type="submit"]:focus {}

Використання:

input:not([disabled]):not([type="submit"]):focus {}

disabledє атрибутом, тому йому потрібні дужки, і ви, здається, у :not()селекторі змішали / відсутні колонки та круглі дужки .

Демонстрація: http://jsfiddle.net/HSKPx/

Варто зазначити одне: я можу помилятися, але я не думаю, що disabledвходи зазвичай можуть отримувати фокус, тому ця частина може бути зайвою.

Як варіант, використовувати :enabled

input:enabled:not([type="submit"]):focus { /* styles here */ }

Знову ж таки, я не можу придумати випадок, коли відключений вхід може отримувати фокус, тому це здається непотрібним.

— Веслі Мурч
джерело

41

: не ([відключено]) - це дуже багатослівний спосіб написання: увімкнено developer.mozilla.org/en-US/docs/Web/CSS/:enabled

— Adria

@Adria не працював для мене з <a>. Був один з <a disabled='disabled'> і повинен був спеціально використовувати: селектор вимкнено. FF65.

— Роберт Неєстрой

чомусь ":

— enable

Чи є різниця між використанням :not([disabled])VS. :not(:disabled)?

— bubencode

15

Ваш синтаксис досить глузливий.

Змініть це:

input:not(disabled)not:[type="submit"]:focus{

до:

input:not(:disabled):not([type="submit"]):focus{

Здається, що багато хто не усвідомлює :enabledі :disabledє дійсними селекторами CSS ...

— Гевін
джерело

5

Чому б не скоротити його далі input:enabled:not([type="submit"]):focus{?

— Шон Бін

7

У вас є кілька помилок друку. Вона повинна бути:input:not([disabled]):not([type="submit"]):focus

Дивіться цей jsFiddle для підтвердження концепції. Якщо я видалив властивість "background-color", я використовую сторону, і тінь поля не працює. Не знаю чому.

— PatrikAkerstrand
джерело