Membuat Custom Checkbox & Radio Button Keren Dengan CSS


Membuat Custom Checkbox & Radio Button Keren Dengan CSS

Assalamualaikum Wr. Wb.
Kali ini saya akan membagikan salah satu teknik desain custom yang bisa diterapin untuk website kita, terutama di bagian Formnya.. Nah, tapi yang jadi fokus saya kali ini adalah di bagian Form checkbox sama radio button. Soalnya kedua obyek tersebut nggak begitu umum didesain dengan CSS. Untuk teknik nge-desain 2 obyek ini nggak bisa terlalu sembarangan, karena minimal kita harus cukup teliti dengan pixel-pixel yang akan sangat bervariasi tergantung kebutuhan kita. Penasaran? oke, Langsung disimak aja deh yuk :)

Pertama-tama, kita bikin form dulu deh.. Boleh ikutin langsung format HTML dibawah ini nih

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Latihan CSS</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <form action="">
        <fieldset>
            <legend>Checkbox</legend>
            <input type="checkbox" name="check" id="txt" class="form-check"> <label for="txt">Contoh Checkbox</label>
            <br>
            <input type="checkbox" name="check" id="txt2" class="form-check"> <label for="txt2">Contoh Checkbox</label>
            <br>
            <input type="checkbox" name="check" id="txt3" class="form-check"> <label for="txt3">Contoh Checkbox</label>               
        </fieldset>
 
 
        <fieldset>
            <legend>Radio Button</legend>
            <input type="radio" class="form-radio" name="rd" id="rd1"> <label for="rd1">Radio Satu</label>
            <br>
            <input type="radio" class="form-radio" name="rd" id="rd2"> <label for="rd2">Radio Dua</label>
            <br>
            <input type="radio" class="form-radio" name="rd" id="rd3"> <label for="rd3">Radio Tiga</label>
        </fieldset>
        <br>
    </form>
</body>
</html>

 

Nah, sampai sejauh ini tampilannya kurang lebih seperti ini :

 

Gimana? Standar lah ya? Dari jaman cheetos masih 500 perak sampe sekarang sih umumnya ya gitu-gitu terus.. Wajar aja sih, soalnya checkbox dan radio button itu nggak bisa dikasih property CSS yang macem-macem. Sekarang kita masuk ke teknik desain checkbox dulu nih.. Untuk mendesain custom checkbox, seenggaknya kita butuh pseudo-element ::before dan ::after pada obyek itu sendiri untuk ngelakuinnya. Sekarang kita buat CSSnya dengan kode seperti dibawah ini

*{margin:0px auto;}
body{
    background:#fafafa;
    font-size:16px;
    font-family:'Lucida Sans', sans-serif;}
 
form{padding:20px;}
form label{
    display:inline-block;
    position:relative;
    cursor:pointer;
    line-height:30px;
    vertical-align: top;}
 
/*MULAI MENDESAIN CUSTOM CHECKBOX DAN RADIO BUTTON*/
form .form-check{
    display:inline-block;
    position:relative;
    width:50px;
    height:25px;}
 
form .form-check::before{
    content:"";
    display:inline-block;
    position:relative;
    width:50px;
    height:25px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:30px; -moz-border-radius:30px;}

 

Sampai disini dulu,, pertama-tama kita liat part Custom Checkbox paling bawah CSS diatas.. Penggunaan pseudo-element ::before maupun ::after pasti selalu diikuti property content. Content bisa diisi dengan nilai karakter apapun, tapi kalau nggak butuh menampilkan karakter apapun ya dikosongin aja dengan petik petik.

Jadi di class form-check::before itu kita sedang membuat sebuah layer tambahan pada checkbox untuk menampilkan kotak putih yang agak bundar-bundar seperti dibawah ini

 

Selanjutnya kita buat bundaran untuk bagian dalam kotak putih di atas. Kalau tadi udah pake pseudo-element ::before, sekarang kita pakai ::after.

form .form-check::after{
    content:"";
    display:inline-block;
    position:absolute;
    width:21px;
    height:21px;
    border-radius:25px; -moz-border-radius:25px;
    background:#eee;
    left:3px;
    top:3px;
    transition:0.3s; -moz-transition:0.3s; -webkit-transition:0.3s; -khtml-transition:0.3s;}

 

Caranya nggak beda jauh dengan yang tadi, btw untuk ukuran pixel-pixelnya itu nggak wajib ya.. Kalau kita mau bikin custom checkbox ukuran lebih besar atau kecil ya kita harus nyocok2in sendiri. Supaya bulatan di dalam (::after) itu bisa bergerak / pindah tempat ketika kita checkboxnya dalam keadaan terpilih, kita butuh bantuan pseudo-class lagi yg bernama checked. Jadinya ya seperti ini :

form .form-check:checked::after{
    left:27px;
    background:#33aa55;}
/*posisi leftnya dikira-kira aja sesuai kebutuhan~
warna background diubah ke warna yang berwarna sbg pertanda
checkbox tersebut aktif*/

 

Yeah... si custom checkbox sekarang udah jadi deh, Sekarang kita beralih ke radio button deh.. Untuk cara custom radio button, pseudo-element yang akan dipakai sih masih sama. Jadinya, untuk radio button ini, kita harus menyembunyikan radio button yg asli, dan membuat obyek baru di <label>. Yuk disimak :)

form .form-radio{display:none;}
form .form-radio + label{padding-left:35px;}
form .form-radio + label::before{
    content:"";
    position:absolute;
    left:0px;
    display:inline-block;
    width:25px;
    height:25px;
    background:#fff;
    margin-right:5px;
    border:1px solid #ddd;
    border-radius:50%; -moz-border-radius:50%;
    box-shadow:2px 2px 2px #bbb; -moz-box-shadow:2px 2px 2px #bbb;
    transition:0.3s; -moz-transition:0.3s; -webkit-transition:0.3s; -khtml-transition:0.3s;}
form .form-radio:checked + label::before{
    background:#34A8BF;
    border:5px solid #fff;
    width:17px;
    height:17px;}

 

Tekniknya dan konsepnya nggak beda jauh lah ya dengan checkbox tadi.. Yang bikin beda disini cuma ada selector tanda tambah (+). Selector tanda + itu biasanya digunakan untuk menunjuk ke elemen yang setingkat. Jadi .form-radio + label itu menunjuk ke label yang merupakan siblings (saudara setingkat / tetangga) dari si .form-radio gitu. untuk radio button hasil akhirnya seperti ini deh

 

 

Oke gimana? Sekian tutorial dari saya ya, Kalo penjabaran saya ada yg salah, atau ada yg tau cara lebih praktis lagi boleh dishare biar kita sama-sama belajar.. Terima kasih buat perhatiannya, semoga bermanfaat!

Wassalamualaikum Wr. Wb.


http://short.erllang.ga/MuAki

Suka Dengan Artikel ini? Bagikan!  
Facebook Twitter Google+ LINE WhatsApp
Komentar pada “ Membuat Custom Checkbox & Radio Button Keren Dengan CSS