chevron-left chevron-right

[CSS][jQuery] Stylizacja dla elementów typu checkbox i radio

W dzisiejszej poradzie poruszam temat własnych stylów dla elementów strony WWW, które często służą do zaznaczania różnych opcji w ankietach czy sondażach, mowa o checkboxach i radiobuttonach. Dzięki tej poradzie będziecie mogli zastosować efektowne style dla swoich stron WWW.

Zaczynamy od kodu HTML, który wygląda nastepująco:

<input id="boks" type="checkbox" class="checkbox">
<label id="etykietka" for="boks" class="etykieta">Mój własny checkbox</label>

Jak widać kod HTML nie jest ani trochę skomplikowany.

Teraz pora na style, dzięki którym nasza strona nabierze efektowności:

.checkbox {
	display: none;
}
.etykieta {
	background: url("img/tak.png") no-repeat;
	padding-left: 35px;
	padding-top: 3px;
	margin: 5px;
	height: 28px;
	width: 150px;
	display: block;
}
.etykieta:hover {
	text-decoration: underline;
}
.etykieta_wybrana {
	background: url("img/nie.png") no-repeat;
}

A na sam koniec zamieszczam kod w JavaScript, dzięki któremu tworzy się magia na stronie:

$(document).ready(function(){
	$(".checkbox").change(function(){
		if($(this).is(":checked")){
			$(this).next("label").addClass("etykieta_wybrana");
		}else{
			$(this).next("label").removeClass("etykieta_wybrana");
		}
	});
});

Jednak by ten efekt zadziałał należy w sekcji "head" strony wstawić odnośnik do biblioteki jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

To już wszystko. Demo z tego artykułu możecie zobaczyć tutaj.