Input pseudo classi css: not (disabilitato) not: [type = “submit”]: focus

138

Voglio applicare alcuni css per gli elementi di input e voglio farlo solo per gli input che non sono disabilitati e non sono di tipo inoltro, sotto css non funziona, forse se qualcuno può spiegarmi come aggiungere.

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

285

Invece di:

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

Uso:

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

disabledè un attributo, quindi ha bisogno delle parentesi e sembra che tu abbia mescolato / mancante due punti e parentesi sul :not()selettore.

Demo: http://jsfiddle.net/HSKPx/

Una cosa da notare: potrei sbagliarmi, ma non penso che gli disabledinput possano normalmente ricevere lo stato attivo, quindi quella parte potrebbe essere ridondante.

In alternativa, utilizzare :enabled

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

Ancora una volta, non riesco a pensare a un caso in cui l'input disabilitato può ricevere lo stato attivo, quindi non sembra necessario.

— Wesley Murch
fonte

41

: not ([disabled]) è un modo molto dettagliato di scrivere: enabled developer.mozilla.org/en-US/docs/Web/CSS/:enabled

— Adria,

@Adria non ha funzionato per me con <a> di. Ne avevo uno con <a disabled='disabled'> e dovevo usare specificamente il selettore: disabled. FF65.

— Robert Niestroj,

per qualche motivo ": enabled" non funzionava in ie 11 per me

— SLCH000

C'è qualche differenza tra l'uso di :not([disabled])VS. :not(:disabled)?

— bubencode

15

La tua sintassi è piuttosto complicata.

Cambia questo:

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

per:

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

Sembra che molte persone non si rendano conto :enablede :disabledsiano selettori CSS validi ...

— Gavin
fonte

5

Perché non accorciarlo ulteriormente input:enabled:not([type="submit"]):focus{?

— Sean the Bean,

7

Hai alcuni errori di battitura nella tua selezione. Dovrebbe essere:input:not([disabled]):not([type="submit"]):focus

Vedi questo jsFiddle per una prova di concetto. Su un sidenote, se ho rimosso la proprietà "background-color", l'ombra della casella non funziona più. Non so perché.

— PatrikAkerstrand
fonte