Technologia się rozwija nieustannie. Aplikacje internetowe są ulepszane nieustannie. Czasy statycznych stron zniknęły bezpowrotnie. Wykorzystanie Javascriptu, nowinek HTML5 i CSS3 to standard. Jak przeżyć w tym świecie? Pytanie z nutką ironii, bowiem teraz aplikacje przykuwają bardzo wzrok obserwatora i o tym dzisiaj parę słów.

Tworząc własną witrynę możemy wybrać jedną z 3 dróg: wykorzystać CMS, zamówić projekt graficzny lub samemu pomęczyć się w budowaniu od podstaw. O ile pierwsza droga (w przypadku darmowych CMSów) nie zamęczy naszego budżetu, o tyle druga już z dużym prawdopodobieństwem będzie to niosła za sobą. Ostatnia opcja dotyczy twórców z powołania, obeznanych w temacie i stawiających sobie wyzwania … których nie goni czas 🙂 W tym artykule trochę o nich, a więc może i o Tobie?!

Standardowe kontrolki formularzy są nudne. Nie da się ukryć. Oklepana grafika, więc oka nie zachwyca. Jednak możemy to zmienić! 

Projekt graficzny pól formularza

Teraz będziemy tworzyli własne checkboxy i radiobuttony. Zatem do dzieła.

Czego potrzebujemy?

• dwie grafiki np. 56px x 56px
• arkusza stylów
• kodu html

Grafika

Jedna grafika ma odpowiadać za checkboxy (np. checkbox.png), a druga za radiobuttony (np. radio.png). Analogicznie każda z grafik składa się z 4 części 28px x 28px:

• w lewym górnym rogu grafika niezaznaczonego i niepodświetlonego (kursor poza polem) pola,
• w prawym górnym rogu grafika zaznaczonego i niepodświetlonego pola,
• w lewym dolnym rogu grafika niezaznaczonego i podświetlonego (kursor na polu) pola,
• w prawym dolnym rogu grafika zaznaczonego i podświetlonego pola.

Arkusz CSS

Kod stylów dla checkboxa:

input[type='checkbox'] {
	display: none;
}			

input[type='checkbox']+label {
	width: 28px;
	height: 28px;
	background: url('../images/checkbox.png') no-repeat;
	padding: 0;
	border: 0;
	display: inline-block;
	vertical-align: bottom;
}

input[type='checkbox']+label:hover {
	background-position: left bottom;
}

input[type='checkbox']:checked+label {
	background-position: right top;
}				

input[type='checkbox']:checked+label:hover {
	background-position: right bottom;
}

input[type='checkbox']+label+label {
	line-height: 28px;
}

Krótko opiszę kod. Natywne pole zostaje ukryte. To wymaga dołączenia „pola”, które będzie ja zastępowało i do tego pozwoli na manipulację wyglądem. Idealnie nadaje się do tego label z uwagi na łatwe powiązanie z polem (ukrytym!) poprzez atrybut for. Ustawiamy obrazek tła dla labela, wysokość, szerokość itd. Zmieniamy background-position w zależności od tego czy pole (ukryte!) jest zaznaczone i podświetlone. Kolejny label już, jak intuicja podpowiada, będzie wyświetlał nam odpowiedni tekst.

Kod stylów dla radiobuttona:

input[type='radio'] {
	display: none;
}			

input[type='radio']+label {
	width: 28px;
	height: 28px;
	background: url('../images/radio.png') no-repeat;
	padding: 0;
	border: 0;
	display: inline-block;
	vertical-align: bottom;
}

input[type='radio']+label:hover {
	background-position: left bottom;
}

input[type='radio']:checked+label {
	background-position: right top;
}				

input[type='radio']:checked+label:hover {
	background-position: right bottom !important;
}				

input[type='radio']+label+label {
	line-height: 28px;
}

Kod HTML

Od razu dla obu … domyślicie się, który który 🙂

<div class="radio">
    <input id="radio1" value="1-5" checked="checked" type="radio" name="radio1">
    <label for="radio1"></label>
    <label for="radio1">1-5</label>
</div>

<div class="checkbox">
    <input id="checkbox1" value="Komentarze - umożliwienie komentowania wybranych treści na stronie" type="checkbox" name="checkbox1">
    <label for="checkbox1"></label>
    <label for="checkbox1">Komentarze - umożliwienie komentowania wybranych treści na stronie</label>
</div>

 

Podsumowanie

Przez tych kilka małych zmian możemy sprawić, że nasz formularz ożyje. Powyższy mechanizm pozwala bez użycia Javascriptu stworzyć nowy wygląd formularza, gdzie interakcja następuje po kliknięciu dowolnego elementu pola – akcja na dowolnym labelu będzie połączona z odpowiednim w stosunku do niego inpucie. Szybko łatwo i przyjemnie.