Tipps und Tricks: Bunte Rahmen für Radiobutton und Checkboxen
Warum immer nur die langweiligen weißen Radiobutton? Mit CSS lassen sie sich in buntgerahmte Elemente verwandeln.
,
,
,
,
<html> <head> <title>Transparente Hintergründe</title> </head> <body> <form> <p> <input type="checkbox" style="border:4px solid #ff0000;"> Checkbox 1</p> <p> <input type="checkbox" style="border:4px solid #0000ff;"> Checkbox 2</p> <p> <input type="checkbox" style="border-top:4px solid #00ffff; border-bottom:4px solid #ff0000; border-left:4px solid #0000ff; border-right:4px solid #ff00ff;"> Checkbox 3</p> <p> <input type="radio" name="a" style="border:4px solid #ff0000;"> Radiobutton 1</p> <p> <input type="radio" name="a" style="border:4px solid #0000ff;"> Radiobutton 2</p> <p> <input type="radio" name="a" style="border-top:4px solid #00ffff; border-bottom:4px solid #ff0000; border-left:4px solid #0000ff; border-right:4px solid #ff00ff;"> Radiobutton 3</p> </form> </body> </html>
Die Eigenschaft border legt für alle vier Seiten eines
Elements und
border-bottom,
border-top,
border-left und
border-right
legen für jede einzelne Seite einen Rahmen fest.
Das ist alles.
Browser
Die Browser zeichnen die Rahmen leider auf unterschiedliche Weise um die Checkboxen und Radiobutton. Dies macht sich bei breiten Rahmen besonders bemerkbar (Siehe den Artikel Checkboxen, Radiobutton mit Rahmen und Hintergrundfarbe). Du musst die Seiten mit den gängigen Browsern prüfen