Cara Membuat Custom Checkbox Menarik

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Membuat Custom Checkbox Menarik.

Checkbox adalah sebuah field yang berisi berbagai pilihan dimana ceheckbox biasa kita pakai di form isian. Cara menggunakannya adalah dengan menceklis pilihan yang kita akan pilih dan bisa di pilih lebih dari satu.

Sekarang saya akan mencoba membuat tutorial singkat tentang Cara Membuat Custom Checkbox Menarik:

-Pertama teman-teman ketikan tag html di bawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Dumetschool</title>
	
</head>
<body>

	<div class="container">
		
		<div class="control-group">
		    <h1>Dumetschool</h1>
		    <label class="control control--checkbox">Web Master
		      <input type="checkbox" checked="checked"/>
		      <div class="control__indicator"></div>
		    </label>
		    <label class="control control--checkbox">Graphic Design
		      <input type="checkbox"/>
		      <div class="control__indicator"></div>
		    </label>
		    <label class="control control--checkbox">Android Programming
		      <input type="checkbox" disabled="disabled"/>
		      <div class="control__indicator"></div>
		    </label>
		    <label class="control control--checkbox">Jquery
		      <input type="checkbox" disabled="disabled" checked="checked"/>
		      <div class="control__indicator"></div>
		    </label>
  		</div>

	</div>

</body>
</html>

Maka hasilnya akan seperti ini:

â€“ Kedua untuk mempercantik tampilannya teman-teman ketikan kode css3 di bawah ini:

html,
body {
  height: 100%;
}
body {
  background: #e6e6e6;
  font-family: 'Source Sans Pro', sans-serif;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
h1 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 300;
  margin-top: 0;
}
.control-group {
  display: inline-block;
  vertical-align: top;
  background: #fff;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  padding: 30px;
  width: 200px;
  height: 210px;
  margin: 10px;
}
.control {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 18px;
}
.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  background: #e6e6e6;
}

.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
  background: #ccc;
}
.control input:checked ~ .control__indicator {
  background: #2aa1c0;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
  background: #0e647d;
}
.control input:disabled ~ .control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}
.control input:checked ~ .control__indicator:after {
  display: block;
}
.control--checkbox .control__indicator:after {
  left: 8px;
  top: 4px;
  width: 3px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.control--checkbox input:disabled ~ .control__indicator:after {
  border-color: #7b7b7b;
}

Setelah teman-teman selesai memasukan cssnya teman-teman save lalu kita link dengan html yang telah kita buat, disini saya menamakan css dengan style.css:

<link rel="stylesheet" type="text/css" href="style.css">

Setelah itu kita refresh browser kita maka tampilannya akan menjadi seperti ini:

Bagaimana teman-teman mudahkan Membuat Custom Checkbox Menarik.

Sekian tutorial saya untuk kali ini tentang Cara Membuat Custom Checkbox Menarik. Maaf bila ada kesalahan dalam tutorialnya.

Sehat selalu ya teman-teman, selamat mencoba.

Kategori