CSS-Selektor für Texteingabefelder?

Question

Wie kann ich mit CSS-Selektoren auf Eingabefelder vom Typ 'Text' zielen?

Answer 1

input[type=text] 

oder zu beschränken Eingänge innen Textformen

form input[type=text] 

oder zu beschränken, weiter auf eine bestimmte Form, vorausgesetzt, es ID myForm

#myForm input[type=text] 

Hinweis hat: Dies ist nicht von IE6 unterstützt, also wenn Sie für IE6 entwickeln wollen entweder IE7.js (wie Yi Jiang vorgeschlagen) oder starten Sie Klassen zu allen Ihren Text-Eingaben hinzufügen.

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

---

Da it is specified dass Standardattributwerte nicht immer mit Attributselektoren wählbar sein, man könnte versuchen, andere Fälle von Markup zu decken, für die Texteingaben gemacht 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' 

Dies bleibt jedoch der Fall, wenn der Typ definiert ist, aber einen ungültigen Wert hat und immer noch auf type = "text" zurückfällt. Zur Deckung, dass wir ziemlich lächerlich nutzen könnten alle Eingänge wählen, aber diese Wähler

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

nicht einer der anderen bekannten Typen sind wäre und auch die list of possible types wächst mit neuen Funktionen in HTML hinzugefügt.

Hinweis: Die :not pseudo-class wird nur mit IE9 unterstützt.

Answer 2

können Sie die Attributselektor hier verwenden:

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

Dies ist in IE7 und höher unterstützt. Sie können IE7.js verwenden, um Unterstützung dafür hinzuzufügen, wenn Sie IE6 unterstützen müssen.

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

Answer 3

ich in der Regel Wähler in meinem Haupt-Stylesheet verwenden, dann eine IE6 spezifische Js (jquery) Datei machen, die eine Klasse alle Eingabearten ergänzt. Beispiel:

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

Und dann duplizieren Sie einfach meine Stile im ie6 spezifischen Stylesheet mit den Klassen. Auf diese Weise ist das eigentliche Markup etwas sauberer.

Answer 4

Sie :text Selector können Sie alle Eingaben mit Typ Text

Working Fiddle

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

:text ist ein jQuery-Erweiterung und nicht Teil der CSS-Spezifikation, Abfragen mit wählen: Text kann nicht in Anspruch nehmen der Leistungssteigerung, die von der systemeigenen DOM-Methode querySelectorAll() bereitgestellt wird.Für eine bessere Leistung in modernen Browsern verwenden Sie stattdessen [type="text"]. 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 gepostet, der beste Weg, heutzutage - Cross-Browser und hinter IE6 verlassen - ist

[type=text] {} 

Niemand unteren CSS erwähnt zu verwenden Spezifität (whyisthatimportant?) bisher, [type=text]features 0,0,1,0 statt 0,0,1,1 mit input[type=text].

Leistungstechnisch gibt es überhaupt keine negativen Auswirkungen mehr.

normalisieren v4.0.0 gerade veröffentlicht with lowered selector specificity.

Answer 6

Ich hatte Eingabefeld Textfeld in einem Tabellenzeilenfeld. Ich bin Targeting es mit Code

.admin_table input[type=text]:focus 
{ 
    background-color: #FEE5AC; 
} 

Answer 7

Mit Attributselektor uns Eingabetyp Text in CSS Ziel

input[type=text] { 
background:gold; 
font-size:15px; 
}