Tutorial Kostumisasi Radio Button Dan Checkbox

Radio Button dan Checkbox merupakan form input yang dimiliki oleh bahasa pemrograman HTML, hanya saja kedua form input tersebut memiliki tampilan yang kurang menarik. Dan berikut akan saya berikan tutorial bagaimana mengkostumisasi Radio Button serta Checkbox dengan hasil akhir seperti screenshot berikut.

Yang pertama adalah buatlah file index.html dan tulislah script berikut, didalam tag body tentunya (script ini hanya sebagian saja dan bukan keseluruhan script).

    
    

        

    
    Pilihan 1

Script diatas yang paling penting selain tag input adalah class custom-radio serta radio-checked, karena kedua class tersebut yang akan menggantikan bulatan input Radio Button. Namun tentu saja script diatas tidak akan bekerja tanpa styling. Nah berikut style css yang perlu kalian tambahkan.

.custom-radio{
    display: inline-block;
    margin-top: 1px;
    position: absolute;
    border: 1px solid #5AB6CD;
    border-radius: 50%;
    width: 15px;
    height: 15px;
}
.radio-checked{
    border-radius: 50%;
    background-color: #5AB6CD;
    width: 11px;
    height: 11px;
    margin: 2px;
}
.radio-label{
    display: inline-block;
    margin-left: 24px;
}

Setelah style css ditambahkan, maka akan menghasilkan tampilan seperti screenshot berikut.

Nah, sekarang kita tinggal menyembunyikan bulatan form input Radio Button-nya.

Untuk mengkostumisasi Checkbox, caranya hampir sama dengan Radio Button, hanya saja pemberian style css-nya yang berbeda. Buatlah script html seperti berikut.

    
    

        

    
    Pilihan 1

Lalu tambahkan style berikut ini

.custom-checkbox{
    display: inline-block;
    margin-top: 1px;
    position: absolute;
    border: 1px solid #5AB6CD;
    width: 15px;
    height: 15px;
}

.checkbox-checked{
    border-left: 3px solid #5AB6CD;
    border-bottom: 3px solid #5AB6CD;
    position: absolute;
    background-color: transparent;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    -o-transform: rotate(315deg);
    width: 14px;
    height: 6px;
}

.checkbox-label{
    display: inline-block;
    margin-left: 24px;
}

Dan hasilnya akan seperti screenshot berikut, jangan lupa untuk menyembunyikan kotak form input Checkbox-nya.

Nah, cukup mudah bukan? Jika masih bingung, jangan ragu untuk meninggalkan komentar ya. Dan jika anda ingin mengunduhnya serta menggunakannya sebagai bahan untuk belajar, klik link Download dibawah. Keep study guys. :)

Demo Download