CSS-Selektor für Texteingabefelder?

Wie kann ich Eingabefelder vom Typ 'Text' mithilfe von CSS-Selektoren ausrichten?

input[type=text]

oder um die Texteingabe in Formularen zu beschränken

form input[type=text]

oder, um sich weiter auf eine bestimmte Form zu beschränken, vorausgesetzt, sie hat eine ID myForm

#myForm input[type=text]

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

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

Da angegeben ist, dass Standardattributwerte mit Attributselektoren möglicherweise nicht immer auswählbar sind, könnte versucht werden, 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'

Dies bleibt jedoch der Fall, wenn der Typ definiert ist, aber einen ungültigen Wert hat und dieser immer noch auf type = "text" zurückgreift. Um dies abzudecken, könnten wir alle Eingänge auswählen, die nicht zu den anderen bekannten Typen gehören

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 HTML hinzugefügt werden.

Hinweis: Die :notPseudoklasse wird nur ab IE9 unterstützt.

Sie können den Attributselektor hier verwenden:

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

Dies wird 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.

Weitere Informationen finden Sie unter: http://reference.sitepoint.com/css/attributeselector

Normalerweise 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 dupliziere ich einfach meine Stile im ie6-spezifischen Stylesheet mit den Klassen. Auf diese Weise ist das eigentliche Markup etwas sauberer.

Mit :textSelector können Sie alle Eingaben mit Text eingeben

Geige arbeiten

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

:textist eine jQuery-Erweiterung und nicht Teil der CSS-Spezifikation. Abfragen mit: text können die Leistungssteigerung der nativen DOM querySelectorAll () -Methode nicht nutzen. Verwenden Sie [type="text"]stattdessen für eine bessere Leistung in modernen Browsern . Dies wird funktionieren für IE6+.

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

CSS

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

Ich hatte ein Textfeld vom Typ Eingabe in einem Tabellenzeilenfeld. Ich ziele mit Code darauf ab

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

Wie @Amir oben gepostet hat, ist der beste Weg heutzutage - browserübergreifend und IE6 hinter sich zu lassen - die Verwendung

[type=text] {}

Bisher erwähnte niemand eine niedrigere CSS-Spezifität ( warum ist das wichtig ?) Mit [type=text] Merkmalen von 0,0,1,0 anstelle von 0,0,1,1 mit input[type=text].

In Bezug auf die Leistung gibt es überhaupt keine negativen Auswirkungen mehr.

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

Mit der Attributauswahl zielen wir auf Text vom Eingabetyp in CSS ab

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

Eingabe [Typ = Text]

Dadurch wird der gesamte Text des Eingabetyps auf einer Webseite ausgewählt.

Die Attributselektoren werden häufig für Eingaben verwendet. Dies ist die Liste der Attributselektoren:

[title] Alle Elemente mit dem title-Attribut werden ausgewählt.

[title = banana] Alle Elemente, die den 'Bananen'-Wert des title-Attributs haben.

[title ~ = banana] Alle Elemente, die 'banana' im Wert des title-Attributs enthalten.

[title | = banana] Alle Elemente, deren Wert des title-Attributs mit 'banana' beginnt.

[title ^ = Banane] Alle Elemente, deren Wert des title-Attributs mit 'banana' beginnt.

[title $ = banana] Alle Elemente, deren Wert des title-Attributs mit 'banana' endet.

[title * = banana] Alle Elemente, deren Wert das title-Attribut enthält, enthalten den Teilstring 'banana'.

Referenz: https://kolosek.com/css-selectors/