Eingabe von CSS-Pseudoklassen: nicht (deaktiviert) nicht: [type = “submit”]: focus

138

Ich möchte etwas CSS für Eingabeelemente anwenden und ich möchte dies nur für Eingaben tun, die nicht deaktiviert sind und keinen Übermittlungstyp haben. Unter CSS funktioniert dies nicht. Vielleicht kann mir jemand erklären, wie dies hinzugefügt werden muss.

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
quelle

Antworten:

284

Anstatt:

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

Verwenden:

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

disabledist ein Attribut, daher werden die Klammern benötigt, und Sie scheinen Doppelpunkte und Klammern in der :not()Auswahl verwechselt / vermisst zu haben .

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

Eine Sache zu beachten: Ich kann mich irren, aber ich glaube nicht, dass disabledEingaben normalerweise den Fokus erhalten können, so dass dieser Teil möglicherweise redundant ist.

Alternativ verwenden :enabled

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

Auch hier kann ich mir keinen Fall vorstellen, in dem deaktivierte Eingaben den Fokus erhalten können, daher scheint dies unnötig.

Wesley Murch
quelle
41
: not ([disabled]) ist eine sehr ausführliche Schreibweise: enabled developer.mozilla.org/en-US/docs/Web/CSS/:enabled
Adria
@Adria hat bei mir mit <a> nicht funktioniert. Hatte eine mit <a disabled='disabled'> und musste speziell den: disabled-Selektor verwenden. FF65.
Robert Niestroj
aus irgendeinem Grund funktionierte ": enabled" nicht in dh 11 für mich
SLCH000
Gibt es einen Unterschied zwischen der Verwendung von :not([disabled])VS? :not(:disabled)?
Bubencode
15

Ihre Syntax ist ziemlich verrückt.

Ändere das:

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

zu:

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

Scheint, dass viele Leute nicht erkennen :enabledund :disabledgültige CSS-Selektoren sind ...

Gavin
quelle
5
Warum nicht weiter verkürzen input:enabled:not([type="submit"]):focus{?
Sean the Bean
7

Sie haben ein paar Tippfehler in Ihrer Auswahl. Es sollte sein:input:not([disabled]):not([type="submit"]):focus

In dieser jsFiddle finden Sie einen Proof of Concept. Wenn ich nebenbei die Eigenschaft "Hintergrundfarbe" entfernt habe, funktioniert der Box-Schatten nicht mehr. Nicht sicher warum.

PatrikAkerstrand
quelle