Cara Membuat “Custom” Select Arrow


Selamat Malam, udah lama nih nggak nulis di sini. Ok, kali ini ane mau share bagaimanasih caranya membuat “custom” select di html. Kenapa hal ini perlu?

Baiklah, hal ini perlu di lakukan agar select yang kita buat, tampilannya selalu sama di setiap browsernya (bahasa kerennya cross borwser).

Langsung aja sedot code di bawah ini:

HTML:

 < div class="select-wrapper" >
   < select >
     < option value="1" >Test< /option >
     < option value="2" >Coba< /option >
     < option value="3" >Select< /option >
     < option value="4" >Menu< /option >
   < /select >
< /div >

CSS:

.select-wrapper:after {
  content:'';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #000000 transparent transparent transparent;
  position: absolute;
  top: 14px;
  right: 25px;
  z-index: 10;
}
select {
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Explore Bima : Dam Pela – Parado, Salah Satu Danau Buatan Terbesar Di Indonesia


Kembali lagi, gue nulis tentang keindahan daerah gue. Yups.. Bima…. Sekarang giliran danau buatan yang terletak tidak jauh dari rumah gue. “Dam Pela Parado” begitu biasa orang-orang Bima mengenalnya. Danau ini adalah danau buatan yang dibuat untuk menahan debit air agar ketika hujan tidak terjadi banjir dan ketika musim kemarau tiba, masyarakat di sekitarnya tidak dilanda krisis air. Baca lebih lanjut