Attributselektoren

Gestern habe ich was entdeckt, was vielleicht für jemanden nützlich sein könnte :-)

Ich musste per CSS eine Inputbox mit gewissem Namen und/oder Typ formatieren.
Dies ist mit folgendem Befehl im CSS-File möglich: Selektor[Attribut=Wert]{ CSS; }

Beispiel HTML:

<html><head></head><body>
<input type=”text” name=”username” />
<input type=”text” name=”email” />
</body></html>

Beispiel CSS:

input[type=text]{ border: 1px solid white; }
input[name=email]{ background-color: #CCCCCC; }

Die erste Formatierung wird beiden Eingabefeldern einen weissen Rand mit der Grösse von 1px anzeigen. Die zweite Formatierung verpasst dem Eingabefeld (name=email) einen grauen Hintergrund.

Dies kann auch nützlich sein, um z.B. vor gewissen Links ein Icon anzuzeigen:

a[href $='.pdf'] {
padding: 5px 0 5px 20px;
background: url(icons/pdf.gif) no-repeat center left;

}

Hinweis: Attribut-Selektoren werden vom IE6 nicht unterstützt!

Eine Liste mit weiteren Informationen und Beispielen findet ihr hier:
http://www.intensivstation.ch/css/selectors/attribute-selectors/

Du kannst alle Antworten zu diesem Eintrag via RSS 2.0 Feed erfolgen. Du kannst einen Kommentar hinterlassen, oder einen Trackback von deiner eigenen Seite.

Eine Antwort schreiben

XHTML: Diese Tags kannst Du benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>