How To

Cara Membuat Checkbox dan Radio Button

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;
}

Hanifah Nurbaeti

Share
Tags: formHow Tohtml dan css