Cara Membuat Custom Select Box

Di bawah ini kita akan mempelajari cara membuat custom select box dengan CSS dan JavaScript.

Custom Select Box

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*container harus diposisikan relatif:*/
.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*sembunyikan elemen SELECT asli:*/
}

.select-selected {
  background-color: DodgerBlue;
}

/*beri style panah di dalam elemen select:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/*arahkan panah ke atas saat kotak select terbuka (aktif):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/*style item (opsi), termasuk item yang dipilih:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/*sembunyikan item saat kotak pilih ditutup:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}
</style>
</head>     

<body>

<h2>Custom Select</h2>

<!--mengelilingi kotak pilihan dengan elemen DIV "custom-select". Jangan lupa untuk mengatur lebarnya:-->
<div class="custom-select" style="width:200px;">
 <select>
    <option value="0">Select Negara:</option>
    <option value="1">Indonesia</option>
    <option value="2">Malaysia</option>
    <option value="3">Vietnam</option>
    <option value="4">Filipina</option>
    <option value="5">Jepang</option>
    <option value="6">Korea Selatan</option>
    <option value="7">Singapura</option>
    <option value="8">Thailand</option>
    <option value="9">Korea Utara</option>
    <option value="10">Cina</option>
    <option value="11">Brunei Darussalam</option>
    <option value="12">Timor Leste</option>
  </select>
</div>

<script>
var x, i, j, l, ll, selElmnt, a, b, c;
/*cari elemen apa pun dengan kelas "custom-select":*/
x = document.getElementsByClassName("custom-select");
l = x.length;
for (i = 0; i < l; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  ll = selElmnt.length;
  /*untuk setiap elemen, buat DIV baru yang akan bertindak sebagai item yang dipilih:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*untuk setiap elemen, buat DIV baru yang akan berisi daftar opsi:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 1; j < ll; j++) {
    /*untuk setiap opsi di elemen select asli,
     buat DIV baru yang akan bertindak sebagai item opsi:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    c.addEventListener("click", function(e) {
        /*ketika item diklik, perbarui kotak select asli,
         dan item yang dipilih:*/
        var y, i, k, s, h, sl, yl;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        sl = s.length;
        h = this.parentNode.previousSibling;
        for (i = 0; i < sl; i++) {
          if (s.options[i].innerHTML == this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            y = this.parentNode.getElementsByClassName("same-as-selected");
            yl = y.length;
            for (k = 0; k < yl; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
      /*ketika select box diklik, tutup select box lainnya,
       dan buka / tutup select box saat ini:*/
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
    });
}
function closeAllSelect(elmnt) {
  /*fungsi yang akan menutup semua select box dalam dokumen,
   kecuali select  box saat ini:*/
  var x, y, i, xl, yl, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  xl = x.length;
  yl = y.length;
  for (i = 0; i < yl; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < xl; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
/*jika pengguna mengklik di mana saja di luar select box,
lalu tutup semua select box:*/
document.addEventListener("click", closeAllSelect);
</script>

</body>
</html>

Buat Menu Custom Select Box

Langkah 1) Tambahkan HTML:
Contoh

<!--mengelilingi kotak pilihan dengan elemen DIV "custom-select". Jangan lupa untuk mengatur lebarnya:-->
<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select Negara:</option>
    <option value="1">Indonesia</option>
    <option value="2">Malaysia</option>
    <option value="3">Vietnam</option>
    <option value="4">Filipina</option>
    <option value="5">Jepang</option>
    <option value="6">Korea Selatan</option>
    <option value="7">Singapura</option>
    <option value="8">Thailand</option>
    <option value="9">Korea Utara</option>
    <option value="10">Cina</option>
    <option value="11">Brunei Darussalam</option>
    <option value="12">Timor Leste</option>
  </select>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/*container harus diposisikan relatif:*/
.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*sembunyikan elemen SELECT asli:*/
}

.select-selected {
  background-color: DodgerBlue;
}

/*beri style panah di dalam elemen select:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/*arahkan panah ke atas saat kotak select terbuka (aktif):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/*style item (opsi), termasuk item yang dipilih:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/*sembunyikan item saat kotak pilih ditutup:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

Langkah 3) Tambahkan JavaScript:
Contoh

var x, i, j, l, ll, selElmnt, a, b, c;
/*cari elemen apa pun dengan kelas "custom-select":*/
x = document.getElementsByClassName("custom-select");
l = x.length;
for (i = 0; i < l; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  ll = selElmnt.length;
  /*untuk setiap elemen, buat DIV baru yang akan bertindak sebagai item yang dipilih:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*untuk setiap elemen, buat DIV baru yang akan berisi daftar opsi:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 1; j < ll; j++) {
    /*untuk setiap opsi di elemen select asli,
     buat DIV baru yang akan bertindak sebagai item opsi:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    c.addEventListener("click", function(e) {
        /*ketika item diklik, perbarui kotak select asli,
         dan item yang dipilih:*/
        var y, i, k, s, h, sl, yl;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        sl = s.length;
        h = this.parentNode.previousSibling;
        for (i = 0; i < sl; i++) {
          if (s.options[i].innerHTML == this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            y = this.parentNode.getElementsByClassName("same-as-selected");
            yl = y.length;
            for (k = 0; k < yl; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
      /*ketika select box diklik, tutup select box lainnya,
       dan buka / tutup select box saat ini:*/
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
    });
}
function closeAllSelect(elmnt) {
  /*fungsi yang akan menutup semua select box dalam dokumen,
   kecuali select  box saat ini:*/
  var x, y, i, xl, yl, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  xl = x.length;
  yl = y.length;
  for (i = 0; i < yl; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < xl; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
/*jika pengguna mengklik di mana saja di luar select box,
lalu tutup semua select box:*/
document.addEventListener("click", closeAllSelect);

form How To html dan css

Cara Membuat Custom Select Box

Custom Select Box

Buat Menu Custom Select Box

Cara Membuat Checkbox dan Radio Button

Cara Membuat Toggle Switch

You may also like