Ostatnie wpisy na blogu

Niestandardowe pola typu checkbox i radio

11 września 2014/2 komentarze/w CSS /Autor Łukasz Socha

Kodując wszelkiego rodzaju formularze zapewne nie raz spotkałeś się z problemem o stylowania pól typu radio i checkbox. Nie da się ich stylować za pomocą CSS tak prosto jak pola tekstowe, ale wraz z pojawieniem się CSS 3 powstał pewien prosty sposób :)

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
        body{
            background: #e2fbff;
        }
        input[type=radio], input[type=checkbox] {
            display: none;
        }
        .radio {
            display: inline-block;
            color: #464949;
            margin: 12px 20px 28px 0;
            cursor: pointer;
        }
        .radio:before {
            content: "";
            display: inline-block;
            width: 18px;
            height: 18px;
            vertical-align: middle;
            background-color: #ffffff;
            text-align: center;
            color: #14aa9e;
            border: 2px solid #71b9c9;
            border-radius: 25px;
            font-size: 22px;
        }

        input[type=radio]:checked + .radio:before {
            content: "\2022";
            font-size: 18px;
            color: #ed4a13;
        }
        .radio span{
            padding-left: 10px;
        }

        .checkbox {
            display: inline-block;
            color: #464949;
            margin: 12px 20px 0 0;
            cursor: pointer;
        }
        .checkbox:before {
            content: "";
            display: inline-block;
            width: 22px;
            height: 22px;
            vertical-align: middle;
            background-color: #ffffff;
            text-align: center;
            color: #14aa9e;
            font-size: 22px;
        }

        input[type=checkbox]:checked + .checkbox:before {
            content: "\221A";
            font-size: 22px;
            color: #ed4a13;
        }
        .checkbox span{
            padding-left: 10px;
        }
    </style>
</head>
<body>
<input name="name" type="radio" id="radio1" value="tak"/> <label for="radio1" class="radio"><span>tak</span> </label>
<input name="name" type="radio" id="radio2" value="nie"/> <label for="radio2" class="radio"><span>nie</span> </label><br/><br/>
<input type="checkbox" id="checkbox1" value="checkbox 1"/> <label for="checkbox1" class="checkbox">checkbox 1 </label><br/>
<input type="checkbox" id="checkbox2" value="checkbox 2"/> <label for="checkbox2" class="checkbox">checkbox 2 </label><br/>
<input type="checkbox" id="checkbox3" value="checkbox 3"/> <label for="checkbox3" class="checkbox">checkbox 3 </label><br/>
</body>
</html>

Stosując powyższe reguły CSS wystarczy dodać odpowiednią klasę dla znacznika label i … gotowe :). Oczywiście tło, wypełnienie itp można dowolnie modyfikować. Rozwiązanie testowane w Chrome, FireFox, Opera, IE (od wersji 9), mobilny FireFox. Tak wygląda u mnie powyższy przykład:

Print Friendly, PDF & Email