Псевдоклассы CSS input: not (отключено) not: [type = «submit»]: focus

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
источник

Ответы:

286

Вместо того:

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
: not ([disabled]) - это очень подробный способ написания: enabled developer.mozilla.org/en-US/docs/Web/CSS/:enabled
Adria
@Adria не работает для меня с <a>. Был один с <a disabled='disabled'> и должен был специально использовать: disabled. FF65.
Роберт Нестрой
по какой-то причине ": позволено" не работало в то есть 11 для меня
SLCH000
Есть ли разница между использованием :not([disabled])VS. :not(:disabled)?
bubencode
15

Ваш синтаксис довольно странный.

Изменить это:

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

чтобы:

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

Кажется, что многие люди не понимают :enabledи :disabledявляются действительными селекторами CSS ...

Gavin
источник
5
Почему бы не сократить его до input:enabled:not([type="submit"]):focus{?
Шон Бин
7

Вы выбрали несколько опечаток. Так должно быть:input:not([disabled]):not([type="submit"]):focus

См. Этот jsFiddle для подтверждения концепции. В случае sidenote, если я удалил свойство background-color, то тень от поля больше не будет работать. Не уверен почему.

PatrikAkerstrand
источник