Oto przykład zamiany elementów typu checkbox na obrazki, wykonany przy pomocy czystego CSS i umieszczony w formularzu Contact Form 7 .
Pola wielokrotnego wyboru poprawnie pokazują swój stan i są zgodne z WCAG.
Łatwo można zmienić rozmiar i styl zaznaczenia obrazków, edytując CSS. Warto też dodać własny styl dla pseudoklasy :disabled.
Poniżej konfiguracja.
<label> Twoje Imię
[text* your-name] </label>
<label> Twój email
[email* your-email] </label>
<!-- Żeby pola wyboru były naprawdę dostępne i zgodne z WCAG, wstawiaj je wewnątrz elementu fieldset i dodaj element legend -->
<fieldset>
<legend>Wybierz swój owoc</legend>
[checkbox checkbox-238 class:imgchkbox use_label_element "Pomarańcze" "Banany" "Truskawki"]
</fieldset>
<style>
/* zamieniamy standardowy checkbox na własny */
.imgchkbox input[type="checkbox"] {
/* najpierw ukrywamy domyślną kontrolkę */
appearance: none;
background-color: #fff;
margin: 0;
/* Teraz ustawiamy pole (box) do umieszczenia obrazka */
font: inherit;
color: currentColor;
width: 5em;
height: 5em;
border: 0.15em solid lightgray;
border-radius: 0.15em;
transform: translateY(-0.075em);
background-color: lightgray;
background-size: contain;
transition: all 0.3s ease-out;
}
/* Zmieniamy wygląd zaznaczonej kontrolki */
.imgchkbox input[type="checkbox"]:checked {
filter: brightness(0.7);
outline: 2px red solid;
}
/* Ustawiamy obrazki w tle dla każdego checkboxa */
.imgchkbox .wpcf7-list-item:first-child input[type="checkbox"] {
background-image: url("https://bon.uw.edu.pl/wp-content/uploads/2022/08/oranges.jpg");
}
.imgchkbox .wpcf7-list-item:nth-child(2) input[type="checkbox"] {
background-image: url("https://bon.uw.edu.pl/wp-content/uploads/2022/08/bananas.jpg");
}
.imgchkbox .wpcf7-list-item:last-child input[type="checkbox"] {
background-image: url("https://bon.uw.edu.pl/wp-content/uploads/2022/08/strawberries.jpg");
}
.imgchkbox .wpcf7-list-item {
display: block;
}
.imgchkbox .wpcf7-list-item label {
display: flex;
align-items: center;
}
.imgchkbox .wpcf7-list-item label .wpcf7-list-item-label {
margin-left: 1em;
}
</style>
[submit "Wyślij"]