Coole Radio-Buttons und Checkboxen ohne JavaScript

npostnik

vor 9 Jahren

Man braucht nur ein zusätzliches Span im Label (wahrscheinlich nicht mal das) und muss darauf achten, dass das for-Attribut beim Label korrekt gesetzt ist.

Das HTML:

<input id="radiobutton" type="radio" name="radiobutton" value="1" />
<label for="radiobutton"><span></span>Radio Button</label>

Man blendet die eigentliche Box aus und „zeichnet“ stattdessen eine Box mit CSS. Wenn die Box angeklickt ist, dann mache ich in dem Fall ein blaues Quadrat rein, man könnte aber auch Iconfont nehmen oder doch Hintergrundbilder (die ich eigentlich damit vermeiden will).

Das Styling als SCSS:

input[type="radio"] {
	display:none;
}
 
input[type="radio"] + label span {
	display:inline-block;
	position: relative;
	width:22px;
	height:22px;
	background-color: $darkgray;
	border: 2px solid #ababab;
	@include border-radius(3px);
	margin-right: 5px;
	cursor:pointer;
}
 
input[type="radio"]:checked + label span {
	&::after {
		content: "";
		@include border-radius(3px);
		width: 10px;
		height: 10px;
		background-color: $blue;
		border: 1px solid darken($blue, 10%);
		position: absolute;
		top: 3px;
		left: 3px;
		display: block;
	}
}

Das gleiche Prinzip lässt sich auch auf Checkboxen übertragen.