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