CSS-Selektor für Texteingabefelder?

Question

Wie kann ich Eingabefelder des Typs "Text" mit CSS-Selektoren ausrichten?

Answer 1

input[type=text]

oder auf Texteingaben in Formularen zu beschränken

form input[type=text]

oder, um sich weiter auf ein bestimmtes Formular zu beschränken, vorausgesetzt, es hat id myForm

#myForm input[type=text]

Hinweis: Dies wird vom IE6 nicht unterstützt. Wenn Sie also für den IE6 entwickeln möchten, verwenden Sie entweder IE7.js (wie von Yi Jiang vorgeschlagen) oder fangen Sie an, Klassen zu all Ihren Texteingaben hinzuzufügen.

参考 http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

---

Porque es ist festgelegt dass Standard-Attributwerte nicht immer mit Attributselektoren auswählbar sind, könnte man versuchen, andere Fälle von Markup abzudecken, für die Texteingaben gerendert werden:

input:not([type]), /* type attribute not present in markup */
input[type=""],    /* type attribute present, but empty    */
input[type=text]   /* type is explicitly defined as 'text' */

Es bleibt aber immer noch der Fall, dass der Typ zwar definiert ist, aber einen ungültigen Wert hat, der immer noch auf type="text" zurückfällt. Um diesen Fall abzudecken, könnten wir alle Eingaben auswählen, die nicht einem der anderen bekannten Typen entsprechen

input:not([type=button]):not([type=password]):not([type=submit])...

Aber dieser Selektor wäre ziemlich lächerlich und auch die Liste der möglichen Typen wächst mit neuen Funktionen, die zu HTML hinzugefügt werden.

Hinweis: Die :not Pseudoklasse wird erst ab IE9 unterstützt.

Answer 2

Hier können Sie den Attributselektor verwenden:

input[type="text"] {
    font-family: Arial, sans-serif;
}

Dies wird von IE7 und höher unterstützt. Sie können verwenden IE7.js um diese Unterstützung hinzuzufügen, wenn Sie den IE6 unterstützen müssen.

Voir : http://reference.sitepoint.com/css/attributeselector für weitere Informationen

Answer 3

In der Regel verwende ich Selektoren in meinem Haupt-Stylesheet und erstelle dann eine ie6-spezifische .js-Datei (jquery), die allen Eingabetypen eine Klasse hinzufügt. Beispiel:

$(document).ready(function(){
  $("input[type='text']").addClass('text');
)};

Und dann einfach duplizieren meine Stile in der ie6 spezifischen Stylesheet mit den Klassen. Auf diese Weise ist das eigentliche Markup ein wenig sauberer.

Answer 4

Sie können verwenden :text Selektor zur Auswahl aller Eingaben mit dem Typ Text

Arbeitsfiedel

$(document).ready(function () {
    $(":text").css({    //or $("input:text")
        'background': 'green',
        'color':'#fff'
    });
});

:text eine jQuery-Erweiterung und nicht Teil der CSS-Spezifikation ist, können Abfragen mit :text nicht von der Leistungssteigerung profitieren, die die native DOM-Methode querySelectorAll() bietet. Für eine bessere Leistung in modernen Browsern, verwenden Sie [type="text"] stattdessen. Dies funktioniert für IE6+ .

$("[type=text]").css({  // or $("input[type=text]")
    'background': 'green',
    'color':'#fff'
});

CSS

[type=text] // or input[type=text] 
{
    background: green;
}

Answer 5

Wie @Amir oben geschrieben hat, ist der beste Weg heutzutage - browserübergreifend und den IE6 hinter sich lassend - die Verwendung von

[type=text] {}

Niemand erwähnte eine geringere CSS-Spezifität ( por qué est que wichtig ?) bis jetzt, [type=text] Merkmale 0,0,1,0 anstelle von 0,0,1,1 mit input[type=text] .

In Bezug auf die Leistung gibt es keinerlei negative Auswirkungen mehr.

normalize v4.0.0 gerade veröffentlicht mit verringerter Selektorspezifität .