nicht angemeldet
input:after funktioniert nicht :-o
0 0 
MudGuard
0
input:after funktioniert nicht :-o
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)
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Hi,
Was mich derzeit stört, ist das zusätzliche span-Element. Aber das lässt sich wohl nicht vermeiden?
Es könnte zumindest durch ein wesentlich angebrachteres LABEL ersetzt werden.
Ansonsten eignen sich diese Pseudoklassen am ehesten für optische Manipulationen am Element selber - das können andere Farben sein, oder bspw. auch ein Hintergrundbild bzw. damit umgesetztes wechselndes Icon innerhalb des Padding-Bereiches der Checkbox, o.ä.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Om nah hoo pez nyeetz, ChrisB!
Ansonsten eignen sich diese Pseudoklassen am ehesten für optische Manipulationen am Element selber - das können andere Farben sein, oder bspw. auch ein Hintergrundbild bzw. damit umgesetztes wechselndes Icon innerhalb des Padding-Bereiches der Checkbox, o.ä.
Die Checkbox selbst weigert sich tapfer, irgendeine Formatierung von mir anzunehmen. Sie wird zwar im Firebug als angewendet angezeigt aber vom Browser auch als inline-style nicht umgesetzt. In den anderen Browsern sieht es ähnlich unvollkommen aus.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
-
Hi,
input:disabled + span:after {content: " nicht auswählbar"}
input:enabled + span:after {content: " auswählbar"}
input:checked + span:after {content: " ausgewählt"}
<li><input type="checkbox"><span></span></li>
<li><input type="checkbox" disabled><span></span></li>
<li><input type="checkbox"><span></span></li>Der zur Checkbox gehörende Text ist m.E. Inhalt, nicht Dekoration, gehört also eher ins HTML (label-Element!) als ins CSS .
Was mich derzeit stört, ist das zusätzliche span-Element. Aber das lässt sich wohl nicht vermeiden?
content aus :after wird am Ende des Elementinhalts eingefügt. input hat aber keinen Inhalt, in den etwas eingefügt werden könnte ...
Auch grundsätzlich andere Ideen sind willkommen.
s.o.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Om nah hoo pez nyeetz, MudGuard!
input:disabled + span:after {content: " nicht auswählbar"} input:enabled + span:after {content: " auswählbar"} input:checked + span:after {content: " ausgewählt"}<li><input type="checkbox"><span></span></li> <li><input type="checkbox" disabled><span></span></li> <li><input type="checkbox"><span></span></li>
Der zur Checkbox gehörende Text ist m.E. Inhalt, nicht Dekoration, gehört also eher ins HTML (label-Element!) als ins CSS .
Es soll ja eigentlich nicht eine Beschriftung des Elementes sein und vor allem soll in Abhängigkeit von der Nutzerinteraktion der Text getauscht werden. Deshalb also der generierte Inhalt. Also wirklich nur ein zusätzlicher Hinweis:
Klimaanlage O nicht verfügbar Radio x ausgewählt
und wie gesagt vor dem Hintergrund: Beispiel fürs wiki.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
-
-