CSS-Selektor für Texteingabefelder?

Wie kann ich Ziel-input-Felder vom Typ 'text' mit Hilfe von CSS Selektoren?

InformationsquelleAutor der Frage Yarin | 2010-11-06

  1. 595
    input[type=text]

    oder zu beschränken, für text-Eingaben innerhalb von Formularen

    form input[type=text]

    oder zu beschränken, noch weiter auf eine bestimmte form haben, vorausgesetzt, es hat id - myForm 

    #myForm input[type=text]

    Hinweis: Dies ist nicht unterstützt von IE6, wenn Sie so wollen, zu entwickeln, die für den IE6 nutzen, die entweder IE7.js (wie Yi Jiang vorgeschlagen) oder starten Sie das hinzufügen von Klassen, die alle Ihre text-Eingänge.

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

    Weil es ist angegebendass die default-Attributwerte können nicht immer ausgewählt werden, die mit Attribut-Selektoren, könnte man versuchen, über andere Fälle von markup für die text-inputs 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'

    Immer noch lässt dies der Fall, wenn der Typ definiert ist, aber einen ungültigen Wert hat und immer noch fällt zurück auf type="text". Zu decken, die wir nutzen könnten wählen Sie alle Eingänge, die nicht einer der anderen bekannten Arten

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

    Aber diese Auswahl wäre ziemlich lächerlich und auch die Liste der möglichen Typen wächst mit neuen features, die Hinzugefügt wird, um HTML.

    Beachten Sie: die :not pseudo-Klasse wird nur unterstützt, beginnend mit IE9.

    InformationsquelleAutor der Antwort Alin Purcaru

  2. 33

    Können Sie den Attribut-Selektor hier: 

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

    Unterstützt wird dies im IE7 und höher. Sie können IE7.jsum Unterstützung für diese, wenn Sie brauchen, um Unterstützung für IE6.

    Finden Sie unter: http://reference.sitepoint.com/css/attributeselector weitere Informationen

    InformationsquelleAutor der Antwort Yi Jiang

  3. 13

    Ich in der Regel verwenden Sie Selektoren in meinem Haupt-stylesheet, dann machen Sie ein ie6-spezifisch .js (jquery) - Datei, fügt eine Klasse, um alle input-Typen. Beispiel:

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

    Dann Dupliziere einfach meine styles in die ie6-spezifische stylesheet mit den Klassen. Dass das eigentliche markup ist ein wenig sauberer.

    InformationsquelleAutor der Antwort garrettwinder

  4. 6

    Können Sie :text - Selektor wählen Sie alle Eingänge mit Typ text

    Arbeiten Geige

    $(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 kann nicht die Vorteile der performance-Schub, bereitgestellt durch die native DOM querySelectorAll () - Methode. Für eine bessere performance in modernen Browsern, verwenden Sie [type="text"] statt. 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;
}

    InformationsquelleAutor der Antwort Aamir Shahzad

  5. 1

    Hatte ich input type text Feld in einer Tabelle Zeile Feld. Ich bin targeting-code

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

    InformationsquelleAutor der Antwort Amit Mhaske

  6. 0

    Als @Amir oben geschrieben, ist der beste Weg heutzutage – cross-browser und hinterließ IE6 – ist die Verwendung

    [type=text] {}

    Niemand erwähnte untere CSS-Spezifität (warum ist dass wichtig?) bisher [type=text] features 0,0,1,0 statt 0,0,1,1 mit input[type=text].

    Performance-Weise, es gibt keine negativen Auswirkungen mehr.

    normalisieren v4.0.0 gerade veröffentlicht mit gesenkten Selektor-Spezifität.

    InformationsquelleAutor der Antwort Volker E.

  7. 0

    Mit dem Attribut-Selektor, wir richten uns input type text CSS

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

    InformationsquelleAutor der Antwort Santosh Khalse

  8. -1

    Den Attribut-Selektoren werden oft benutzt, für die Eingänge. Dies ist die Liste der Attribut-Selektoren:

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

    [Titel=Banane]
    Alle Elemente, die die 'Banane' mit dem Wert des title-Attributs.

    [title~=Banane]
    Alle Elemente enthalten, die 'Banane' in der der Wert des title-Attributs.

    [|Titel=Banane]
    Alle Elemente, die den Wert des title-Attribut beginnt mit 'Banane'.

    [title^=Banane]
    Alle Elemente, die den Wert des title-Attribut beginnt mit 'Banane'.

    [title$=Banane]
    Alle Elemente, die den Wert des title-Attributs endet mit 'Banane'.

    [title*=Banane]
    Alle Elemente, die den Wert des title-Attributs enthält die Zeichenkette 'Banane'.

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

    InformationsquelleAutor der Antwort Nesha Zoric

Schreibe einen Kommentar