CSS-Auswahl für <input type = “?”

105

Gibt es eine Möglichkeit mit CSS, alle Eingaben basierend auf ihrem Typ zu zielen? Ich habe eine deaktivierte Klasse, die ich für verschiedene deaktivierte Formularelemente verwende, und ich lege die Hintergrundfarbe für Textfelder fest, aber ich möchte nicht, dass meine Kontrollkästchen diese Farbe erhalten.

Ich weiß, dass ich dies mit separaten Klassen tun kann, aber ich würde wenn möglich lieber CSS verwenden. Ich bin sicher, ich kann dies in Javascript einstellen, suche aber wieder nach CSS.

Ich ziele auf IE7 +. Ich glaube also nicht, dass ich CSS3 verwenden kann.

Bearbeiten

Mit CSS3 könnte ich so etwas machen?

INPUT[type='text']:disabled das wäre noch besser, meine Klasse insgesamt loszuwerden ...

Bearbeiten

Ok danke für die Hilfe! Hier ist also ein Selektor, der alle Textfelder und Bereiche ändert, die deaktiviert wurden, ohne dass Klassen festgelegt werden müssen. Als ich diese Frage startete, hätte ich nie gedacht, dass dies möglich ist ...

INPUT[disabled][type='text'], TEXTAREA[disabled]
{   
    background-color: Silver;
}

Dies funktioniert in IE7

JoshBerke
quelle
2
Ich habe einen Artikel mit detaillierten Informationen zu CSS-Attributselektoren geschrieben.
Sarfraz

Antworten:

155

Ja. IE7 + unterstützt Attributselektoren:

input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]

Elementeingabe mit Attributtyp, der einen Wert enthält, der gleich ist, mit einem bestimmten Wert beginnt, diesen enthält oder mit diesem endet.

Andere sichere (IE7 +) Selektoren sind:

  • Eltern> Kind, das hat: p > span { font-weight: bold; }
  • Vorangestellt von ~ Element, das ist: span ~ span { color: blue; }

Was für <p><span/><span/></p>würde Ihnen effektiv geben:

<p>
    <span style="font-weight: bold;">
    <span style="font-weight: bold; color: blue;">
</p>

Weiterführende Literatur: Browser-CSS-Kompatibilität auf quirksmode.com

Ich bin überrascht, dass alle anderen denken, dass dies nicht möglich ist. CSS-Attributselektoren sind bereits seit einiger Zeit hier. Ich denke, es ist Zeit, unsere CSS-Dateien zu bereinigen.

Filip Dupanović
quelle
Ok, ich hatte es versucht, aber es hat nicht funktioniert, jetzt funktioniert es, also muss ich meine Syntax durcheinander bringen.
JoshBerke
Du hast gerade meinen Tag gemacht! Wenn Sie meine Woche dazu bringen möchten, mir zu sagen, dass dies in IE6 ohne Verwendung von Ausdrücken möglich ist, hehe :-) j / k dort
JoshBerke
13
Leider kann es nicht. Ich habe aus religiösen Gründen aufgehört, IE6 zu unterstützen, und schlage vor, dass wir es auch alle tun. Heute benutze ich den IE-bedingten Kommentar, um Benutzern mitzuteilen, dass ihr Computer und ihre Privatsphäre für die Verwendung von IE6 gefährdet sind und dass sie sofort ein Upgrade durchführen sollten: P
Filip Dupanović
1
Ich glaube, ich bin es so gewohnt, IE6 zu unterstützen, dass ich einfach angenommen habe, dass es auch in IE7 nicht funktionieren würde
TJ L
4
Ich wünschte, ich könnte aufhören, IE6 zu unterstützen, aber ich kann und ich kann nicht tun, was Sie vorgeschlagen haben ... Aber ich wünschte wirklich wirklich, ich könnte ;-)
JoshBerke
3

Leider sind die anderen Poster richtig, dass Sie ... tatsächlich wie von kRON korrigiert, sind Sie mit Ihrem IE7 und einem strengen Dokument in Ordnung, aber die meisten von uns mit IE6-Anforderungen sind dafür auf JS oder Klassenreferenzen reduziert, aber das ist es Eine CSS2-Eigenschaft, nur eine ohne ausreichende Unterstützung durch IE ^ h ^ h-Browser.

Der Vollständigkeit halber hat der Typselektor - ähnlich wie xpath - die Form, [attribute=value]aber es gibt viele interessante Varianten. Es wird ziemlich mächtig sein, wenn es verfügbar ist. Gut, dass Sie IE8 im Kopf behalten.

Annakata
quelle
Sie haben eine aktuellere Browser-Support-Referenz? Das basiert auf IE7 Beta würde gerne IE8
JoshBerke
IE8 ist noch in der Beta, aber quirksmode sagt "Ja": quirksmode.org/css/contents.html
annakata
Ich unterstütze immer noch IE6, nur nicht diese kleine visuelle Optimierung.
JoshBerke
fair genug, es war mein Fehler, basierend auf dem Titel zu antworten, ich neige dazu, allgemeine Fälle zu beantworten - ich sollte wirklich mehr Fragen lesen :)
annakata
1

Sie können dies mit jQuery tun. Mit ihren Selektoren können Sie nach Attributen wie Typ auswählen. Dies setzt jedoch voraus, dass Ihre Benutzer Javascript aktiviert haben und eine zusätzliche Datei zum Herunterladen haben, aber wenn es funktioniert ...

cdeszaq
quelle
0

Entschuldigung, die kurze Antwort lautet nein. CSS (2.1) markiert nur die Elemente eines DOM, nicht deren Attribute. Sie müssten auf jede Eingabe eine bestimmte Klasse anwenden.

Schade, ich weiß, denn das wäre unglaublich nützlich.

Ich weiß, dass Sie gesagt haben, Sie würden CSS gegenüber JavaScript bevorzugen, aber Sie sollten trotzdem in Betracht ziehen, jQuery zu verwenden. Es bietet eine sehr saubere und elegante Möglichkeit, DOM-Elementen basierend auf Attributen Stile hinzuzufügen.

Phil.Wheeler
quelle
jquery ist der Weg, dies zu tun, oder nur JavaScript im Allgemeinen
TravisO
4
Diese Antwort ist falsch (der CSS 2.1-Teil): w3.org/TR/CSS21/selector.html#attribute-selectors . Wenn nicht, klären Sie bitte Ihre Antwort.
Cic
1
Entschuldigung - du hast ganz recht. Ich erwarte nur das Wenigste von IE7, da Entwickler so oft immer noch gleichzeitig IE6 unterstützen müssen. Hätte die Frage genauer lesen und meine Hausaufgaben machen sollen.
Phil.Wheeler