Ostylowanie formularza bez JS
W zeszłym roku pokazywałem, jak skutecznie upiększyć pola wyboru korzystając z jQuery. Możliwe jest również zrobienie tego bez udziału skryptów po stronie przeglądarki – umożliwia to HTML-owy label oraz pseudoklasa :checked.
Na potrzeby tego wpisu stworzyłem przykładowy, nietypowy checkbox:
Cała filozofia tkwi w tym, żeby we wcześniej wspomnianym elemencie label umieścić razem pole wyboru, a zaraz po nim drugi, dowolny element taki jak span czy div.
Dzięki temu:
- klikając na drugi element wpływamy na checkbox, ponieważ na kliknięcie reaguje label
- element możemy ostylować korzystając z input[type=”checkbox”]:checked i operatora +
Prosty kod, który obrazuje powyższe działania poniżej (najpierw HTML):
<form> <label for="checkbox1"> <input type="checkbox" id="checkbox1" /> <span></span> </label> </form>
i CSS:
label { cursor: pointer; } label input[type="checkbox"] { display: none; } label input[type="checkbox"] + span { display: block; width: 60px; height: 30px; border: 1px solid #BABABA; position: relative; border-radius: 20px; background: #F7F7F7; } label input[type="checkbox"] + span:before { display: block; content: ''; width: 27px; height: 26px; background: rgba(0, 0, 0, 0.4); position: absolute; top: 2px; left: 30px; transition: all 0.3s ease-in-out; border-radius: 50%; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3); } label input[type="checkbox"]:checked + span:before { left: 3px; background: #14E831; }
W ten sposób możemy bawić się z checkboksami i polami opcji za pomocą wyłącznie stylów CSS.
Tyle czasu minęło, a post wciąż aktualny, haha
Hello there, You could have conducted a wonderful job. I am going to absolutely reddit the item as well as our part recommend so that you can my girlfriends. I am sure they will be taken advantage of this web site.
Dawno nie zaglądałem, ale widzę kolejny wpis który jest ciekawy i bardzo fajnie napisany.Przede wszystkim pomocny do tego aby strona zrobiła się przejrzysta.
Pozdrawiam i czekam na kolejne wpisy.
Dobry wpis bardzo mi pomógł ten przykładowy checkbox.W miarę rozjaśniło mi sytuację.
meraszka ostatnio opublikował Przedłużanie i zagęszczanie rzęs – Kraków
ciekawy artykuł, wszystko jasne jak sie zna HTMLa
Rozumiem, że ccs3 sprawdza się w tym idealnie 🙂
Tomasz Wydra ostatnio opublikował Jak zarabiać na zapleczu? Moje wszystkie blogi pod WPSEO