Tampilan menarik dan cantik pada sebuah website merupakan hal wajib dan paling penting yang harus ada oleh karena nya kita patut memperhatikan setiap detail tampilan dari masing-masing element website, hal ini akan berpangaruh pada kualitas website itu sendiri. Seperti hal nya pada tampilan form inputan, biasa nya kita masih sering menemukan tampilan form inputan masih sangat sederhana, tampilan Radio, Checkbok dan inputan lain nya masih sangat sederhana. Tapi apakah bisa kita mengubah tampilan Radio dan Checkbox ? tentu saja bisa, berikut akan saya jelaskan bagaimana Cara Mengubah Tampilan Radio dan Checkbox dengan CSS3. Bila kalian ingin tampilan inputan Radio ataupun Checkbox terlihat menarik, tidak ada salahnya untuk mencoba tutorial berikut ini.

Pada dasarnya untuk membuat sebuah inputan berupa Radio maupun Checkbox sangat lah mudah, kalian cukup ketikan sintak HTML dasar nya seperti ini.

<input type="radio" name=""> Radio Button
<input type="checkbox" name=""> Checkbox

Dengan sintak diatas kalian sudah bisa menggunakan fungsi dari masing-masing inputan, Nah sekarang kita akan sedikit kostum supaya tampilan Radio dan Checkbox terlihat lebih menarik lagi, caranya adalah dengan sedikit kostum dengan CSS3.

Pertama kita akan membuat tampilan Radio button dan Checkbox nya terlebih dahulu, silahkan kalian bisa ketikan sintak HTML berikut ini.

<body>
<div class="container">
  <ul>
    <li>
      <input type="radio" id="radio-1" name="rad"/>
      <label for="radio-1">Radio Satu</label>
    </li>
    <li>
      <input type="radio" id="radio-2" name="rad"/>
      <label for="radio-2">Radio Dua</label>
    </li>
  </ul>
  <br />
   <ul>
    <li>
      <input type="checkbox" id="check-1"/>
      <label for="check-1">Checkbox Satu</label>
    </li>
    <li>
      <input type="checkbox" id="check-2"/>
      <label for="check-2">Checkbox Dua</label>
    </li>
  </ul>
</div>
</body>

Selanjut nya adalah kita akan kostum Radio dan Checkbox dengan CSS3. berikut sintak CSS3 nya.

li {
  list-style: none;
  font-size: 125%;
  margin-bottom: 1em;
  position: relative;
}
input[type="checkbox"],
input[type="radio"] {
  display: none;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
  padding-left: 2em;
}
input[type="checkbox"]+label:before,
input[type="checkbox"]+label:after,
input[type="radio"]+label:before {
    content: '';
    background: #ececec;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 1px solid #f90;
    z-index: -1;
    position: absolute;
    left: 0;
    transition: all ease .5s;
}
input[type="checkbox"]+label:after{
    border-radius: 0;
}
input[type="checkbox"]:checked+label:after,
input[type="radio"]:checked+label:before {
    border-radius: 50% 0 50% 50%;
    transition: all ease .75s;
    transform: rotate( 45deg );
    background: #666;
    border: 1px solid #666;
}
input[type="checkbox"]:checked+label:before {
    transition: all ease .75s;
    border-radius: 0 50% 50% 0;
    background: #666;
    border: 1px solid #666;
}

Setelah semua sintak CSS3 dan HTMLK diketikan, simpan file dengan format .html kemudian buka dibrowser masing-masing dan lihat hasilnya. Maka akan terlihat tampilan Radio dan Checkbox yang lebih menarik dari biasanya. Baik itulah sedikit tutorial mengenai Cara Mengubah Tampilan Radio dan Checkbox dengan CSS3. semoga bermanfaat 🙂

DEMO