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

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s