option

Mengganti Default Icon pada Select html dengan CSS

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn

Pada html tedapat form input yang sifat nya select yaitu memilih data dengan tampilan dropdown, yang mana pada tampilan select ini memiliki default icon arrow. bagaimana cara mengganti icon default select dengan css. ?

 contoh1

Untuk merubah kita gunakan css.

  • HTML
<div class="lang">
   <select>
	<option>FRA</option>
	<option>ENG</option>
   </select>
</div>
  • CSS
.lang{
    margin-top:10px;
    overflow:hidden;
}
.lang select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 4px 16px 4px 4px;
    border: none;
    background: #62bdd7 url("../images/icon-arrow.png") no-repeat ;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    border-radius: 2px;
    font-weight: bold;
}

hasil dari code di atas :

contoh2

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn
About Ihsan atkia

Ihsan Atkia adalah seorang Front-end Developer yang merambah sebagai UI/UX Web Designer, kecintaannya terhadap dunia Desain muncul semasa sekolah menengah atas (SMA), dengan bergabung di komunitas desain, kemudian melanjutkan di salah satu perguruan tinggi negeri di kota Bandung mengambil jurusan Teknik Informatika, aktif di salah satu club yang bernama Ruang Grafis dan menjadi pengurus club tersebut. dan sampai sekarang masih berkecimpung didunia Web Design khususnya bidang Front-end Developer dan UI/UX Web Designer.