Home » How To » Cara Membuat Checkbox dan Radio Button

Cara Membuat Checkbox dan Radio Button

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