Checkboxen, Radiobutton mit Rahmen und Hintergrundfarbe
Checkboxen und Radiobutton lassen sich mit Rahmen und Hintergrundfarben ausschmücken. Die Darstellung der modernen Browser unterscheidet sich aber erheblich. Nehmen wir das folgende Beispiel:
Quellcode:
<input type="checkbox" style="border:4px solid #ff0000;" /> Checkbox mit Rahmen<br /> <input type="checkbox" style="background-color:#ff0000;" /> Checkbox mit Hintergrundfarbe<br /> <input type="radio" style="border:4px solid #ff0000;" /> Radiobutton mit Rahmen<br /> <input type="radio" style="background-color:#ff0000;" /> Radiobutton mit Hintergrundfarbe<br />
Darstellung:
Checkbox mit Rahmen
Checkbox mit Hintergrundfarbe
Radiobutton mit Rahmen
Radiobutton mit Hintergrundfarbe
Checkbox mit Hintergrundfarbe
Radiobutton mit Rahmen
Radiobutton mit Hintergrundfarbe
Wie in dem Quelltext angegeben, sind in dem Beispiel je zwei Checkboxen und Radiobutton mit jeweils mit einem Rahmen und Hintergrundfarbe. Die folgende Tabelle zeigt unterschiedlichen Darstellungen der Browser:
| Browser | Darstellung |
|---|---|
Der IE stellt Checkboxen und Radiobutton mit einem voreingestellten margin dar,
einem transparenten Leerraum um das Element. Der Rahmen wird nun auf die äußeren Grenzen des Leerraums gezeichnet.
Der Platz, den das Element benötigt ist aber nicht größer, sondern der transparente Leeraum wird um
die Rahmenbreite reduziert.background-color füllt den transparenten Leeraum mit der Hintergrundfarbe. |
 Checkbox mit Rahmen Checkbox mit Hintergrundfarbe Radiobutton mit Rahmen Radiobutton mit Hintergrundfarbe |
Wie der IE stellt auch der Opera 6 Checkboxen und Radiobutton mit einem voreingestellten margin dar,
einem transparenten Leerraum um das Element. Der Rahmen wird aber auf die äußeren Grenzen des Leerraums gezeichnet
und vergrößert den Platz, den das Element benötigt um die Rahmenbreite.background-color füllt den transparenten Leeraum mit der Hintergrundfarbe. |
 Checkbox mit Rahmen Checkbox mit Hintergrundfarbe Radiobutton mit Rahmen Radiobutton mit Hintergrundfarbe |
|
Die Rahmendarstellung ist beim Opera ab der Version 7 gegenüber seinen Vorgängern gleich geblieben, jedoch
wird nun der Hintergrund der Elemente mit der
Hintergrundfarbe ausgefüllt. |
 Checkbox mit Rahmen Checkbox mit Hintergrundfarbe Radiobutton mit Rahmen Radiobutton mit Hintergrundfarbe |
Mozilla bis zur Version 1.1 und der Netscape 7 beschreiten einen anderen Weg.
border färbt den 3D-Rahmen und background-color den
weißen Hintergrund des Elements ein. Die Rahmenbreite hat somit hier keine Auswirkungen.
|
 Checkbox mit Rahmen Checkbox mit Hintergrundfarbe Radiobutton mit Rahmen Radiobutton mit Hintergrundfarbe |
Mozilla ab Version 1.5 und Firefox setzen sich vom Rest des Feldes ab, indem sie überhaupt keine Farben zeigen. Kein
Rahmen und auch keine
Hintergrundfarbe.
|
 Checkbox mit Rahmen Checkbox mit Hintergrundfarbe Radiobutton mit Rahmen Radiobutton mit Hintergrundfarbe |
|
Der Netscape 6 zeichnet den Rahmen auf die äußeren Grenzen des Elements
und verkleinert die Checkbox, bzw. den Radiobutton um die Rahmenbreite, sodass
das Element mit Rahmen nicht mehr Platz benötigt.
|
 Checkbox mit Rahmen Checkbox mit Hintergrundfarbe Radiobutton mit Rahmen Radiobutton mit Hintergrundfarbe |
Na ja. Über den Netscape 4.x bleibt nur zu sagen, dass er natürlich den border falsch interpretiert.
Der Rahmen wird unter die Checkbox, bzw. den Radiobutton gezeichnet und
background-color hat überhaupt keine Auswirkung.
Soll Deine Seite auch für den Netscape 4 geeignet sein, kannst Du keine
CSS-Rahmen für diese Elemente verwenden.
|
 Checkbox mit Rahmen Checkbox mit Hintergrundfarbe Radiobutton mit Rahmen Radiobutton mit Hintergrundfarbe |