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

Bez kategorii Opublikowano: 9/07/2009

O autorze

Jestem webmasterem/webdeveloperem
z pasji. Lubię to co robię i chcę dzielić się wiedzą z innymi osobami.
Specjalizuję się w technologiach związanymi z CSS, JS, PHP.

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.

5 komentarze/y

dzanek
04/08/2010 o 12:27
Hej,
Wszystko pięknie tylko wg mnie styl .checkbox {display:none} powinien być też w jQuery ustawiony przy wczytywaniu strony. Jest to związane z tym, że jeśli USER wyłączy JS to zobaczy checkbox-a Tak czy ianczej sposób bardzo dobry i chętnie skorzystam
Pozdrawiam
tomek
23/12/2010 o 12:35
Wszystko ładnie pięknie tylko w IE nie działa
Developer
22/06/2011 o 14:56
Z JavaScriptem na końcu to nie ma sensu
Piotr Nalepa
22/06/2011 o 16:44
co miałeś na myśli?
Tomek
06/03/2012 o 18:05
bez sensu, pozdrawiam.