Matthias Apsel: input:after funktioniert nicht :-o

Beitrag lesen

SELF-Forum

input:after funktioniert nicht :-o

Matthias Apsel Homepage des Autors
– Informationen zu den Bewertungsregeln

Om nah hoo pez nyeetz, alle!

ganz im Ernst: Formularelemente wie input lassen sich mit CSS nur sehr unzureichend stylen.

Ich bin auf der Suche nach einem Beispiel für die Verwendung der Pseudoklassen enabled, disabled und checked. Mein erster Entwurf macht mich aber nicht wirklich glücklich.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>CSS-Beispiel: Pseudoklassen :enabled, :disabled, :checked</title>
	<style type="text/css">
	  input:disabled + span:after {content: " nicht auswählbar"}
	  input:enabled + span:after {content: " auswählbar"}
	  input:checked + span:after {content: " ausgewählt"}
	</style>
  </head>
  <body>
    <h1>Pseudoklassen für Benutzerinteraktionen</h1>
    <form action="CSS_grundlagen_enabled_disabled_checked.html">
      <ul>
        <li><input type="checkbox"><span></span></li>
        <li><input type="checkbox" disabled><span></span></li>
        <li><input type="checkbox"><span></span></li>
      </ul>
    </form>
  </body>
</html>

Denkbar wäre dies zum Beispiel für eine Aufpreis-/Zubehörliste beim Autokauf.

Was mich derzeit stört, ist das zusätzliche span-Element. Aber das lässt sich wohl nicht vermeiden?

Auch grundsätzlich andere Ideen sind willkommen.

Matthias

--
Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
Beitrag melden
–
Informationen zu den Bewertungsregeln