Home » How To » Cara Membuat Checkbox dan Radio Button

Cara Membuat Checkbox dan Radio Button

Reviewed by Sutiono S.Kom., M.Kom., M.T.I
by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan mempelajari cara membuat custom checkbox dan radio button dengan CSS.

Custom Checkbox dan Radio Button

<!DOCTYPE html>
<html>
<style>
/* The container */
.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;
}

/* Sembunyikan checkbox default browser */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Buat custom checkbox */
.checkmark1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* Saat mengarahkan mouse, tambahkan warna latar belakang abu-abu */
.container:hover input ~ .checkmark1 {
  background-color:#eee;
}

/* Saat checkbox dicentang, tambahkan background gold */
.container input:checked ~ .checkmark1 {
  background-color: #FFD700;
}

/* Buat checkmark atau indikator (tersembunyi jika tidak dicentang) */
.checkmark1:after {
  content: "";
  position: absolute;
  display: none;
}

/* Tunjukkan tanda centang saat dicentang */
.container input:checked ~ .checkmark1:after {
  display: block;
}

/* Style untuk  checkmark atau indikator */
.container .checkmark1: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);
}

/* Sembunyikan radio button default browser */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

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

/* Saat mengarahkan mouse, tambahkan warna background abu-abu */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* Saat radio button dicentang, tambahkan latar belakang merah */
.container input:checked ~ .checkmark {
  background-color: #800000;
}

/* Buat indikator (titik / lingkaran - tersembunyi jika tidak dicentang) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Tunjukkan indikator (titik / lingkaran) saat dicentang */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style untuk indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
</style>
<body>
  <h1>Contoh Custom Checkbox dan Radio Button</h1>
  <br>
<h2>Custom Checkboxes</h2>
<label class="container">Satu
  <input type="checkbox" checked="checked">
  <span class="checkmark1"></span>
</label>
<label class="container">Dua
  <input type="checkbox">
  <span class="checkmark1"></span>
</label>
<label class="container">Tiga
  <input type="checkbox">
  <span class="checkmark1"></span>
</label>
<label class="container">Empat
  <input type="checkbox">
  <span class="checkmark1"></span>
</label>
  
  <h2>Custom Radio Buttons</h2>
<label class="container">Satu
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Dua
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Tiga
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Empat
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

</body>
</html>

Cara Membuat Custom Checkbox

<!DOCTYPE html>
<html>
<style>
/* The container */
.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;
}

/* Sembunyikan checkbox default browser */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Buat custom checkbox */
.checkmark1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* Saat mengarahkan mouse, tambahkan warna latar belakang abu-abu */
.container:hover input ~ .checkmark1 {
  background-color:#eee;
}

/* Saat checkbox dicentang, tambahkan background gold */
.container input:checked ~ .checkmark1 {
  background-color: #FFD700;
}

/* Buat checkmark atau indikator (tersembunyi jika tidak dicentang) */
.checkmark1:after {
  content: "";
  position: absolute;
  display: none;
}

/* Tunjukkan tanda centang saat dicentang */
.container input:checked ~ .checkmark1:after {
  display: block;
}

/* Style untuk  checkmark atau indikator */
.container .checkmark1: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);
}
</style>
<body>

<h1>Custom Checkboxes</h1>
<label class="container">Satu
  <input type="checkbox" checked="checked">
  <span class="checkmark1"></span>
</label>
<label class="container">Dua
  <input type="checkbox">
  <span class="checkmark1"></span>
</label>
<label class="container">Tiga
  <input type="checkbox">
  <span class="checkmark1"></span>
</label>
<label class="container">Empat
  <input type="checkbox">
  <span class="checkmark1"></span>
</label>

</body>
</html>

Langkah 1) Tambahkan HTML:
Contoh

<label class="container">Satu
  <input type="checkbox" checked="checked">
  <span class="checkmark1"></span>
</label>
<label class="container">Dua
  <input type="checkbox">
  <span class="checkmark1"></span>
</label>
<label class="container">Tiga
  <input type="checkbox">
  <span class="checkmark1"></span>
</label>
<label class="container">Empat
  <input type="checkbox">
  <span class="checkmark1"></span>
</label>

Langkah 2) Tambahkan CSS:
Contoh

/* The container */
.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;
}

/* Sembunyikan checkbox default browser */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Buat custom checkbox */
.checkmark1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* Saat mengarahkan mouse, tambahkan warna latar belakang abu-abu */
.container:hover input ~ .checkmark1 {
  background-color:#eee;
}

/* Saat checkbox dicentang, tambahkan background gold */
.container input:checked ~ .checkmark1 {
  background-color: #FFD700;
}

/* Buat checkmark atau indikator (tersembunyi jika tidak dicentang) */
.checkmark1:after {
  content: "";
  position: absolute;
  display: none;
}

/* Tunjukkan tanda centang saat dicentang */
.container input:checked ~ .checkmark1:after {
  display: block;
}

/* Style untuk  checkmark atau indikator */
.container .checkmark1: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);
}

Cara Membuat Custom Radio Button

<!DOCTYPE html>
<html>
<style>
/* The container */
.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;
}

/* Sembunyikan radio button default browser */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

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

/* Saat mengarahkan mouse, tambahkan warna background abu-abu */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* Saat radio button dicentang, tambahkan latar belakang merah */
.container input:checked ~ .checkmark {
  background-color: #800000;
}

/* Buat indikator (titik / lingkaran - tersembunyi jika tidak dicentang) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Tunjukkan indikator (titik / lingkaran) saat dicentang */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style untuk indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
</style>
<body>

<h1>Custom Radio Buttons</h1>
<label class="container">Satu
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Dua
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Tiga
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Empat
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

</body>
</html>

Langkah 1) Tambahkan HTML:
Contoh

<label class="container">Satu
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Dua
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Tiga
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Empat
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

Langkah 2) Tambahkan CSS:
Contoh

/* The container */
.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;
}

/* Sembunyikan radio button default browser */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

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

/* Saat mengarahkan mouse, tambahkan warna background abu-abu */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* Saat radio button dicentang, tambahkan latar belakang merah */
.container input:checked ~ .checkmark {
  background-color: #800000;
}

/* Buat indikator (titik / lingkaran - tersembunyi jika tidak dicentang) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Tunjukkan indikator (titik / lingkaran) saat dicentang */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style untuk indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

You may also like

6 Cara Mengatasi HP Tidak Bisa Getar dengan...

5 Cara Backup Kontak WhatsApp dengan Mudah

13 Cara Mengatasi Google Play Store Tidak Bisa...

3 Cara Reset HP OPPO Paling Gampang

36 Filter IG Aesthetic Terbaru untuk Selfie

5 Cara Transfer Pulsa Semua Operator

Cara Download Video di Instagram Tanpa Aplikasi

11 Cara Monetisasi TikTok untuk Pemula

15 + Cara Mengatasi Pesan WhatsApp Tidak Masuk...

5 Cara Menghilangkan Activate Windows