Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar CSS Bagian 57 : Cara Mengatur Posisi Elemen Menggunakan CSS Sticky. Pada tutorial kali ini, kita akan belajar cara mendesain checkbox dengan CSS.
Checkbox adalah elemen HTML yang digunakan untuk menerima masukan dari pengguna. Sulit untuk menata checkbox, tetapi pseudo-elemen membuat lebih mudah untuk menata checkbox.
Elemen HTML ini umumnya digunakan di setiap web, namun tanpa penataan style, elemen tersebut akan terlihat sama di setiap web.
Jadi, menatanya akan membuat web kita berbeda dan menarik. Kita bisa menyembunyikan checkbox asli untuk memberi gaya pada checkbox.
Menata checkbox menggunakan CSS adalah tugas yang menarik dan kreatif, yang akan memberikan tampilan baru dan menarik pada checkbox default.
Penataan style checkbox akan menjadi jelas dengan menggunakan beberapa contoh. Mari kita lihat beberapa contoh yang sama.
Contoh 1 :
Dalam contoh ini, kita menggunakan ‘~’ yang merupakan sibling combinator. Ini memilih semua elemen yang didahului oleh pemilih sebelumnya.
Kita juga akan menggunakan pseudo-class :hover untuk memberi style pada checkbox ketika pengguna memindahkan kursor ke atasnya.
<!DOCTYPE html>
<html>
<style>
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
cursor: pointer;
font-size: 25px;
}
/* Sembunyikan default checkbox */
.container input {
visibility: hidden;
cursor: pointer;
}
/* Create a custom checkbox */
.mark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: lightgray;
}
.container:hover input ~ .mark {
background-color: gray;
}
.container input:checked ~ .mark {
background-color: blue;
}
/* Buat tanda /indikator (sembunyikan ketika tidak dicentang) */
.mark:after {
content: "";
position: absolute;
display: none;
}
/* Tampilkan tanda Ketika dicentang */
.container input:checked ~ .mark:after {
display: block;
}
/* Style tanda /indikator */
.container .mark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
</style>
<body>
<h1>Kualifikasi</h1>
<label class="container">Kelas Berat
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">Kelas Sedang
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">Kelas Ringan
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">Kelas Umur
<input type="checkbox" checked="check">
<span class="mark"></span>
</label>
</body>
</html>Contoh 2 :
Dalam contoh ini, kita akan melihat tanda centang yang dimodifikasi.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: block;
position: relative;
padding-left: 45px;
margin-bottom: 15px;
cursor: pointer;
font-size: 20px;
}
/* Sembunyikan checkbox asli*/
input[type=checkbox] {
visibility: hidden;
}
/* Buat custom checkbox*/
.mark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: lightgray;
}
/* warna latar belakang yang akan ditampilkan saat mengarahkan kursor ke checkbox */
.container:hover input ~ .mark {
background-color: gray;
}
/* warna latar belakang yang akan ditampilkan saat kotak centang ditandai*/
.container input:checked ~ .mark {
background-color: blue;
}
/* tanda centang untuk ditampilkan di checkbox */
/* Tidak akan ditampilkan ketika tidak dicentang */
.mark:after {
content: "";
position: absolute;
display: none;
}
/* tampilkan tanda centang saat dicentang */
.container input:checked ~ .mark:after {
display: block;
}
/* membuat persegi untuk menjadi tandanya
tanda cek */
.container .mark:after {
left: 6px;
bottom: 6px;
width: 6px;
height: 6px;
border: solid white;
border-width: 4px 4px 4px 4px;
}
</style>
</head>
<body>
<h1>Kualifikasi</h1>
<label class="container">
Kelas Berat
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">
Kelas Sedang
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">
Kelas Ringan
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">
Kelas Umur
<input type="checkbox" checked="check">
<span class="mark"></span>
</label>
</body>
</html> Contoh 3 :
Sekarang, kita akan melihat contoh lain dalam menata checkbox. Dalam contoh ini, kita akan melihat efek riak yang membuat checkbox lebih menarik.
Efek ini memberikan tampilan baru pada checkbox. Mirip dengan contoh di atas, kita juga menggunakan sibling combinator ‘~’, yang akan memilih semua elemen yang didahului oleh pemilih sebelumnya.
Ada juga penggunaan beberapa pseudo-class seperti :checked, :before, :after, dll.
Lihat contoh berikut untuk membuat efek ombak di checkbox dengan menggunakan CSS.
<html>
<head>
<style>
body{
text-align: center;
}
.check {
width: 500px;
margin: 50px auto;
clear: both;
display: block;
background-color: #009BFF;
border-radius: 4px;
}
.check::after {
clear: both;
display: block;
content: "";
}
.check .checkbox-container {
float: left;
width: 50%;
box-sizing: border-box;
text-align:center;
padding: 40px 0px;
}
/* Kotak Centang Penataan Gaya Dimulai */
.checkbox-label {
color: white;
display: block;
position: relative;
margin: auto;
cursor: pointer;
font-size: 22px;
line-height: 24px;
height: 50px;
width: 24px;
clear: both;
}
.checkbox-label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkbox-label .mark {
top:30px;
position: absolute;
height: 24px;
width: 24px;
background-color: transparent;
border-radius: 5px;
transition: all 0.3s ease-in;
border: 2px solid white;
}
.checkbox-label input:checked ~ .mark {
background-color: white;
border-radius: 5px;
transform: rotate(0deg) scale(1);
opacity:1;
border: 2px solid white;
}
.checkbox-label .mark::after {
position: absolute;
content: "";
border-radius: 5px;
}
.checkbox-label input:checked ~ .mark::after {
transform: rotate(45deg) scale(1);
left: 8px;
top: 3px;
width: 6px;
height: 12px;
border: solid red;
border-width: 0 2px 2px 0;
border-radius: 0;
}
/* Untuk efek ombak*/
.checkbox-label .mark::before {
position: absolute;
content: "";
border-radius: 10px;
border: 5px solid yellow;
transform: scale(0);
}
.checkbox-label input:checked ~ .mark::before {
left: -3px;
top: -3px;
width: 24px;
height: 24px;
border-radius: 5px;
transform: scale(3);
opacity:0;
transition: all 0.3s ease-out;
}
</style>
</head>
<body>
<h1>Pilih Jawaban</h1>
<div class="check">
<div class="checkbox-container">
<label class="checkbox-label">A
<input type="checkbox">
<span class="mark"></span>
</label>
</div>
<div class="checkbox-container">
<label class="checkbox-label">B
<input type="checkbox">
<span class="mark"></span>
</label>
</div>
<div class="checkbox-container">
<label class="checkbox-label">C
<input type="checkbox">
<span class="mark"></span>
</label>
</div>
<div class="checkbox-container">
<label class="checkbox-label">D
<input type="checkbox" checked="check">
<span class="mark"></span>
</label>
</div>
</div>
</body>
</html>Semoga tutorial ini bisa membantu Anda untuk mendesain checkbox agar tampil lebih menarik di website Anda.
0 Komentar