Mit CSS Radio-Buttons stylen

Es ist relativ kompliziert einen Radio-Button bzw. eine Checkbox mit CSS zu stylen, aber mit Hilfe von JavaScript trotzdem kein Problem.
Das folgende Beispiel lässt sich dennoch gut einbauen und benötigt lediglich die Standard jQuery-Library.

Zuerst das HTML:

<form action="css-radio-demo.html" method="post">
	<div>
		<label for="foo">
			<span class="styled"><input type="radio" name="radiotest" id="foo" value="Foo" checked/></span>
			Foo
		</label>
		<label for="bar">
			<span class="styled"><input type="radio" name="radiotest" id="bar" value="Bar"/></span>
			Bar
		</label>
	</div>
	<br/>
	<button type="submit">Absenden</button>
</form>

Um den Radio-Button kommt noch ein span-Tag mit der Klasse styled. Auf Grundlage dieser Klasse wird das folgende CSS und JavaScript aufgebaut.
Ebenfalls sehr wichtig ist der Label-Tag, damit der Browser den später versteckten original Radio-Button immer noch anwählen kann. Bitte beachten: Wenn das Label-Feld nicht um das input-Feld gelegt wurde, müssen das for-Attribut und die ID des Input-Elements identisch sein.

Der CSS-Code:

.styled {
	background: url(radio-sprite.png) 0 0 no-repeat scroll transparent;
	display: inline-block;
	vertical-align: middle;
	width: 32px;
	height: 32px;
	cursor: pointer;
}
.styled.checked {
	background-position: 0 -32px;
}
.styled input {
	position: absolute;
	z-index: -1;
}

Das span mit der Klasse styled bekommt ein austauschbares Hintergrundbild (dies sollte der gestylte Radio-Button sein) und das eigentliche input-Element wird versteckt. Mit absoluter Positionierung und einem negativen z-index wird das input-Element einfach unter dem übergeordneten Elementen platziert. Damit ist der Radio-Button zwar noch da, wird aber nicht mehr angezeigt und genau das ist wichtig, damit die Funktion des Elements für das Formular weiterhin gegeben ist.
Dazu kommt noch eine checked-Klasse mit der das Hintergrundbild bei einem angewählten Radio-Button geändert wird.

Der JavaScript-Code:

$(document).ready(function() {
	$(".styled input:checked").parent().addClass("checked");
	$(document).on("change", ".styled input", function() {
		var $this = $(this);
		var form = $this.closest("form");
		form.find("input[name='"+$this.attr("name")+"']").parent().removeClass("checked");
		$this.parent().addClass("checked");
	});
});

Mit dem ersten Befehl (Zeile 2), wird die checked-Klasse hinzugefügt, wenn der Radio-Button bereits vorausgewählt wurde. In dem darauffolgenden Codeblock wird ein neues onchange-Event auf das Input-Element gelegt, das die checked-Klassen entfernt bzw. bei dem neu ausgewählten Element hinzufügt.

Und hier geht’s zur Demo:
CSS Radio-Button Demo

Die Demo funktioniert übrigens in allen Browsern (sogar im IE6, wenn man gif-Bilder statt PNG verwendet).