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

13 Januari 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat