Entrada de pseudo clases de CSS: no (deshabilitado) no: [type = "submit"]: focus

138

Quiero aplicar algunos css para los elementos de entrada y quiero hacerlo solo para las entradas que no están deshabilitadas y no envían el tipo, debajo de css no funciona, tal vez si alguien puede explicarme cómo se debe agregar esto.

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
fuente

285

En vez de:

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

Utilizar:

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

disabledes un atributo por lo que necesita los corchetes, y parece que tiene dos puntos y paréntesis mezclados / faltantes en el :not()selector.

Demostración: http://jsfiddle.net/HSKPx/

Una cosa a tener en cuenta: puedo estar equivocado, pero no creo que las disabledentradas puedan recibir foco normalmente, por lo que esa parte puede ser redundante.

Alternativamente, use :enabled

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

Nuevamente, no puedo pensar en un caso en el que la entrada deshabilitada pueda recibir foco, por lo que parece innecesario.

— Wesley Murch
fuente

41

: not ([disabled]) es una forma muy detallada de escritura: enabled developer.mozilla.org/en-US/docs/Web/CSS/:enabled

— Adria

@Adria no funcionó para mí con <a> 's. Tenía uno con <a disabled='disabled'> y tenía que usar específicamente el selector: disabled. FF65.

— Robert Niestroj

por alguna razón ": habilitado" no funcionaba, es decir, 11 para mí

— SLCH000

¿Hay alguna diferencia entre usar :not([disabled])VS. :not(:disabled)?

— bubencode

15

Tu sintaxis es bastante complicada.

Cambia esto:

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

a:

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

Parece que muchas personas no se dan cuenta :enabledy :disabledson selectores CSS válidos ...

— Gavin
fuente

55

¿Por qué no acortarlo más input:enabled:not([type="submit"]):focus{?

— Sean the Bean

7

Tienes algunos errores tipográficos en tu selección. Debería ser:input:not([disabled]):not([type="submit"]):focus

Vea este jsFiddle para una prueba de concepto. En una nota al margen, si eliminé la propiedad "background-color", la sombra del cuadro ya no funciona. No estoy seguro de por qué.

— PatrikAkerstrand
fuente