Ostylowanie formularza bez JS

12.04.2014 21:33 | Front-end | komentarzy 6

Tagi: ,

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.

komentarzy 6 do “Ostylowanie formularza bez JS”

Skomentuj

CommentLuv