it-swarm.com.de

CSS-Selektor für Texteingabefelder?

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

342
Yarin
input[type=text]

oder auf Texteingaben in Formularen zu beschränken

form input[type=text]

oder, um sich weiter auf eine bestimmte Form zu beschränken, unter der Annahme, dass es eine myForm-ID hat

#myForm input[type=text]

Hinweis: Dies wird nicht von IE6 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 allen Ihren Texteingaben Klassen hinzu.

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


Da es ist angegeben dass Standardattributwerte möglicherweise nicht immer mit Attributselektoren ausgewählt werden können, könnte man versuchen, andere Markup-Fälle abzudecken, für die Texteingaben ausgegeben 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'

Trotzdem bleibt der Fall bestehen, wenn der Typ definiert ist, er hat jedoch einen ungültigen Wert und dieser fällt immer noch auf type = "text" zurück. 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 möglicher Typen wächst mit neuen Funktionen, die HTML hinzugefügt werden.

Hinweis: Die Pseudo-Klasse :not wird nur mit IE9 unterstützt.

630
Alin Purcaru

Sie können die Attributauswahl 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 die Unterstützung dafür hinzuzufügen, wenn Sie IE6 unterstützen müssen. 

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

37
Yi Jiang

Ich verwende normalerweise 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 duplizieren Sie einfach meine Stile im ie6-spezifischen Stylesheet mit den Klassen. Auf diese Weise ist das eigentliche Markup etwas sauberer.

14
garrettwinder

Mit :text Selector können Sie alle Eingaben mit dem Typ Text auswählen

Arbeiten Fiddle

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

:text ist eine jQuery-Erweiterung und nicht Teil der CSS-Spezifikation. Abfragen mit: text können den Leistungszuwachs der nativen DOM-Methode querySelectorAll () nicht nutzen. Verwenden Sie stattdessen [type="text"], um die Leistung in modernen Browsern zu verbessern. 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;
}
6
Aamir Shahzad

Ich hatte ein Textfeld für die Eingabeart in einem Tabellenzeilenfeld. Ich ziele mit Code darauf ab

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

Wie @Amir oben geschrieben hat, ist der beste Weg heutzutage - Browserübergreifend und Hinterlassen von IE6 - zu verwenden

[type=text] {}

Niemand hat die geringere CSS-Spezifität erwähnt ( warumistdass- wichtig ?), [type=text]Features 0,0,1,0 statt 0,0, 1,1 mit input[type=text].

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

normalize v4.0.0 soeben freigegeben mit verringerter Selektorspezifität .

0
Volker E.

Mit dem Attributselektor zielen wir auf den Eingabetyp in CSS

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

eingabe [Typ = Text]

Dadurch wird der gesamte Eingabetyp in einer Webseite ausgewählt.

0
Navneet Kumar