CSS-Selektor für Texteingabefelder?

371

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

— Yarin
quelle

674

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.

— Alin Purcaru
quelle

41

+1 für das Zitieren des tatsächlichen Standards anstelle einer Tutorial-Website

— Šime Vidas

7

Vielen Dank. Mir ist aufgefallen, dass Leute das erste zitieren, was bei Google auftaucht ... oder bei w3schools.

— Alin Purcaru

Ja, das ist irgendwie nervig

— Šime Vidas

Funktioniert es in IE6? Für eine browserübergreifende Lösung bevorzuge ich das Hinzufügen von Klassen (.input-text, .input-submit usw.), die für die HTML-Entwicklung nicht geeignet sind, aber CSS und Javascript werden dadurch ein wenig besser.

— zzzzBov

1

@MubasharAhmad Ich habe meine Antwort aktualisiert und wie Sie sehen, gibt es nur dann eine Problemumgehung, wenn Sie auf Browser über IE9 abzielen.

— Alin Purcaru

37

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

— Yi Jiang
quelle

Seien Sie vorsichtig, die richtige generische Schriftfamilie ist es sans-serifnicht san-serif.

— Volker E.

14

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.

— Garrettwinder
quelle

Das ist sehr langsam

— Hidayt Rahman

8

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;
}

— Aamir Shahzad
quelle

2

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;
}

— Amit Mhaske
quelle

0

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 .

— Volker E.
quelle

0

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

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

— Santosh Khalse
quelle

0

Eingabe [Typ = Text]

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

— Navneet Kumar
quelle

-1

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/

— Nesha Zoric
quelle