Cara Membuat Custom Checkbox dengan Mudah

Hallo semuanya, pada kesempatan kali ini saya akan berbagi tentang sebuah trik menarik mengenai html dan css. Pada trik ini kita akan melakukan manipulas pada sebuah elemen html. Trik ini sangat berguna untuk kalian yang ingin melakukan kustomisasi pada elemen html yang terlihat membosankan. Elemen kali ini yang akan kita manipulasi agar lebih menarik adalah checkbox. Ya checkbox adalah salah satu dari beberapa elemen html yang memiliki tampilan yang tidak terlihat istimewa. Oleh karena itu kita akan merubah tampilan checkbox 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>
<head>
  <title>Paket Kursus</title>
</head>
<body>

<h1>Paket Kursus Web Master</h1>
<label class="container">Premium
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container">Advanced
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Profesional
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Ultimete
  <input type="checkbox">
  <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;
}

.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 {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

 

Juka sudah, hasilnya akan seperti berikut

Demikian artikel kali ini yang membahas tentang cara membuat custom checkbox dengan mudah. Semoga bermanfaat

11 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