Entrada de pseudo classes CSS: not (desativado) not: [type = “submit”]: focus

138

Desejo aplicar algumas CSS para elementos de entradas e quero fazer isso apenas para entradas que não estão desabilitadas e não são do tipo de envio, abaixo de css não está funcionando, talvez se alguém puder me explicar como isso deve ser adicionado.

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
fonte

284

Ao invés de:

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

Usar:

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

disabledé um atributo, portanto, ele precisa dos colchetes e você parece ter misturado / faltando dois pontos e parênteses no :not()seletor.

Demonstração: http://jsfiddle.net/HSKPx/

Uma coisa a ser observada: posso estar errado, mas não acho que as disabledentradas normalmente possam receber foco, portanto essa parte pode ser redundante.

Como alternativa, use :enabled

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

Mais uma vez, não consigo pensar em um caso em que a entrada desativada possa receber foco, por isso parece desnecessário.

— Wesley Murch
fonte

41

: not ([desativado]) é uma maneira muito detalhada de escrever: enabled developer.mozilla.org/pt-BR/docs/Web/CSS/:enabled

— Adria

@Adria não funcionou para mim com <a> 's. Tinha um com <a disabled='disabled'> e precisava usar especificamente o seletor: disabled. FF65.

— Robert Niestroj 7/12

por alguma razão ": ativado" não estava funcionando no IE 11 para mim

— SLCH000

Existe alguma diferença entre usar o :not([disabled])VS. :not(:disabled)?

— bubencode

15

Sua sintaxe é bem esquisita.

Mude isso:

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

para:

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

Parece que muitas pessoas não percebem :enablede :disabledsão seletores CSS válidos ...

— Gavin
fonte

5

Por que não reduzi-lo ainda mais input:enabled:not([type="submit"]):focus{?

— Sean the Bean

7

Você tem alguns erros de digitação no seu select. Deveria ser:input:not([disabled]):not([type="submit"]):focus

Veja este jsFiddle para uma prova de conceito. Em uma nota de rodapé, se eu removi a propriedade "background-color", a sombra da caixa não funciona mais. Não sei por que.

— PatrikAkerstrand
fonte