Jak ustawić input jako obrazek?

Jak zastąpić pole typu checkbox obrazkiem – krótka instrukcja zamiany checkboxa na grafikę

Czasami tworząc listę opcji do wyboru chciałoby się zrobić to niestandardowo, bardziej oryginalnie, w mniej nudny sposób. Po co zaznaczać opcje przedstawione jako tekst, skoro można dodać do nich obrazek i uczynić wybór przyjemniejszym. Jeśli nie bardzo rozumiesz o co mi chodzi, spójrz poniżej:

Chodzi o to, by po kliknięciu w obrazek zaznaczał się input (w tym przypadku checkbox). Możemy wtedy odczytać, który input został zaznaczony i odpowiednio zareagować. Jak więc ustawić input jako obrazek?

HTML – Stwórzmy formularz z trzema obrazkami:

<form>
  <ul>
    <li><input id="flower" type="checkbox" name="icon" value="Kwiatek">
        <label for="flower">Kwiatek</label></li>
    <li><input id="owl" type="checkbox" name="icon" value="Sowa">
        <label for="owl">Sowa</label></li>
    <li><input id="sunflower" type="checkbox" name="icon" value="Słonecznik">
        <label for="sunflower">Słonecznik</label></li>
  </ul>
  <button id="button" type="submit">Potwierdź wybór</button> 
</form>

Utworzyłam trzy inputy w formie listy nienumerowanej, by łatwiej było manipulować ich ustawieniem. Listę wyświetlę w poziomie, by obrazki znajdowały się obok siebie (za pomocą display: inline-block). Każdemu inputowi, łącznie z etykietą do niego przyporządkowaną, nadam tło w formie obrazka i odpowiednio je ustawię. Każdy input, łącznie z etykietą, wyświetlę jako element blokowy, by w pełni widać było tło. Każdemu ustawię też przezroczystą ramkę po to, by nie „skakał”, kiedy pojawi się czarna ramka po kliknięciu w niego.

Kod CSS będzie zatem wyglądał tak:

ul li {
	list-style: none;
	display: inline-block;
	padding: 0px;
}

input {
	display: none;
	margin: 2px;
}

input[type=checkbox] + label[for=flower] {
	display: block;
	background: url(img/flower.png);
	background-repeat: no-repeat;
	background-position: bottom;
	width: 150px;
	height: 180px;
	border: 3px solid transparent;
	text-align: center;
	font-weight: bold;
}

input[type=checkbox] + label[for=owl] {
	display: block;
	background: url(img/owl.png);
	background-repeat: no-repeat;
	background-position: bottom;
	width: 150px;
	height: 180px;
	border: 3px solid transparent;
	text-align: center;
	font-weight: bold;
}

input[type=checkbox] + label[for=sunflower] {
	display: block;
	background: url(img/sunflower.png);
	background-repeat: no-repeat;
	background-position: bottom;
	width: 150px;
	height: 180px;
	border: 3px solid transparent;
	text-align: center;
	font-weight: bold;
}

input[type=checkbox]:checked + label {
	border: 3px solid black;
	border-radius: 20px;
}

Dla elementów listy wyłączyłam „kropki” ustawiając list-style: none, a widoczność samych inputów skorygowałam za pomocą dislay: none.

Efekt – jak na załączonym wyżej obrazku (kodzie) z codepen 🙂