Membuat custom Radio Button

Hallo semuanya, jika sebelumnya saya sudah membuat artikel tentang cara membuat custom checkbox, pada kesempatan kali ini saya akan berbagi tentang sebuah trik menarik mengenai html dan css lagi. Trik ini sangat berguna untuk kalian yang ingin melakukan kustomisasi pada elemen html yang terlihat biasa saja. Elemen kali ini masih dalam kategori input yang akan kita manipulasi agar lebih menarik. Ya seperti pada judul artikel ini, radio adalah salah satu dari beberapa elemen html yang memiliki tampilan yang kurang berwarna. Oleh karena itu kita akan merubah tampilan radio menjadi lebih menarik.

Baiklah, langsung saja kita buat struktur html yang kita butuhkan untuk melakukan manipulasi pada elemen checkbox.

Pertama kita akan buat struktur html seperti berikut

<!DOCTYPE html>
<html>
<body>

<h1>Paket Kursus Dumetschool</h1>
<label class="container">Web Master
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Graphic Design
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Web Programming
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Flash Animation
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

</body>
</html>

Selanjutnya kita perlu memberikan CSS seperti berikut

.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

.container:hover input ~ .checkmark {
    background-color: #ccc;
}

.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.container input:checked ~ .checkmark:after {
    display: block;
}

.container .checkmark:after {
     top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

Juka sudah, hasilnya akan seperti berikut

Baiklah teman teman demikian artikel kali ini yang membahas tentang bagaimana cara membuat custom radio button dengan html dan css. sampai jumpa di artikel selanjutnya. Semoga bermanfaat, Terima kasih