Recents in Beach

Tutorial memperkeren tampilan checkbox dengan html dan css

Raihan Muhammad June 12, 2019
Assamuaikum para pengunjung blog ilmunya-ngoding, lama banget ya admin gak update artikel. Tiba-tiba udah ramadhan aja hehe, pada puasa semua kan ya? semoga tetep lancar ibadahnya di bulan suci ramadhan ini, aminnnn. Baiklah kita lanjut ke artikel tutorial css mempercantik tampilan checkbox dengan html dan css. Tentu buat kalian pemula yang baru belajar coding, dan kebetulan ada tugas untuk membuat sebuah form seperti registrasi dan sebagainya. Pasti kalian tahu dong tentang input type checkbox, hehe. dan mungkin sebagian dari kalian binggung, gimana nih cara merubah tampilanya dengan css? Nah, artikel ini pas banger buat kalian. Karena dalam artikel ini admin akan memberikan full tutorial gimana cara mempercantik atau memperkeren tampilan input type checkbox dengan mudah. Untuk hasilnya kalian bisa lihat gambar thumbnil dibawah ini.

Custom checkbox with css, ilmunya-ngoding.blogspot.com


Baiklah, langsung saja kita mulai tutorial nya. Pertama kalian siapkan terlebih dahulu text editor kalian yang pakek notepad++ atau atom silahkan di buka softwarenya. Karena disini saya memakai sublime text 3 maka saya akan buka sublime text saya.

Kedua, setelah text editor masing-masing siap digunakan, maka langsung saja kita mulai ngoding nya. Let's Code!. buat struktur html dasar terlebih dahulu. Tentunya struktur html dasar ini adalah syarat utama dan yang paling utama sebelum kita mulai membuat sebuah web. Saya rasa kalian juga sudah paham tentang bagaimana membuat sebuah struktur html dasar. Untuk lebih mudahnya kalian bisa copy script di bawah ini saja.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

Nah, perhatikan pada tag <link rel="stylesheet" href="style.css"> fungsi tag ini adalah untuk memanggil file css yang nantinya akan kita buat. Jadi dalam tutorial memperkeren tampilan checkbox dengan html dan css ini, kita akan membuat script html dan css terpisah. Masing-masing script akan di tampung dalam file ber ekstensi html dan css.

Baiklah, setelah kita membuat struktur html dasar maka langkah selanjutnya kita akan tulis tag form yang di dalamnya terdapat tag input bertype checkbox yang akan kita custom atau rubah tampilanya. Eh, tapi sebelum itu kita kasih dulu sebuah tag div bernama center seperti script di bawah ini yaa

<div class="center">
   <form>
 <input type="checkbox">
   </form>
</div>

Nah tag div dengan nama class center tadi di gunakan untuk membungkus semua element yang ada di dalamnya, oh iyaa tambahkan script di atas di dalam tag body ya. Admin kira pasti kalian juga sudah paham sih yaa haha. Nah kemudian untuk keseluran script htmlnya seperti ini ya.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="center">
  <form>
   <input type="checkbox">
  </form>
 </div>
</body>
</html>
Baiklah kita lanjut ke langkah selanjutnya dalam tutorial memperkeren tampilan checkbox dengan css, nah setelah kita membuat script html maka langkah selanjutnya adalah membuat script css nya. Karena script ini nantinya lah yang akan merubah tampilan checkbox kita. Untuk script css nya kalian bisa copy di bawah ini.

body {
 padding: 0;
 margin: 0;
 background-color: #f3f3f3;
}

.center {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

input[type="checkbox"] {
 position: relative;
 width: 80px;
 height: 40px;
 -webkit-appearance: none;
 background-color: #c6c6c6;
 outline: none;
 box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
/* transition: .5s;*/
 border-radius: 20px;
}

input:checked[type="checkbox"]{
 background-color: #2aaaab;
}
input[type="checkbox"]:before {
 content: '';
 position: absolute;
 width: 40px;
 height: 40px;
 background-color: #fff;
 border-radius: 20px;
 transform: scale(1.1);
 top: 0;
 left: 0;
 transition: 0.5s;
 box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
input:checked[type="checkbox"]:before {
 left: 40px;
}
Nah coba kita perhatikan script di bagian input, di situlah letak script yang digunakan untuk mempercantik tampilan checkbox kita. Jangan lupa untuk menaruh file css dan html dalam satu folder ya, Semoga berhasil. Sekian dulu dari admin semoga bermanfaat sampai jumpa di tutorial selanjutnya, wasalamuaikum wr, wb.
Tags:

Post a Comment

1 Comments