Cara mengganti style arrow Elemen Select html

Advertisement

Advertisement

          Mengganti elemen style arrow Select dengan gambar sebagai pengubahnya, itulah yang akan dibahas dipostingan kali ini. Banyak dari sekian kode yang saya coba mengenai materi ini kebanyakan pada saat ditanamkan stylesheet selectnya alhasil tidak berhasil,

Dari detik hingga kedetik, saya mencoba cara mengganti style arrow elemen tersebut di google. Memang, banyak sekali cara yang dapat saya temukan dan tentunya pasti akan terjawab di stackoverfow.

Mungkin bagi para koding pastinya sudah mengetahui apa itu stackoverflow ( sebuah forum bagi para programmer basic hingga tingkat lanjut memposting permasalahan koding yang dihadapinya dan tentu saja pasti akan dijawab oleh para pakar yang sudah mengetahui solved problem dari permasalahan koding yang anda hadapi ) .

Awal mula saya menemukan jawaban dari mengganti style arrow elemen select html, pada awalnya banyak sekali jawaban dari teman - teman stackoverflow mengenai hal tersebut dan dari itu juga kode programnya saya coba dengan kode program elemen select yang digunakan sekarang, memang hasilnya nihil dan tidak muncul style arrownya .

Waktu ke waktu terus saya coba dan hasilnya rumayan sangat memuaskan dan memang bekerja untuk browser google chrome, firefox dan lainya. Tetapi, belum dicoba dengan Internet Explorer .

Lanjut langsung ke topik pembahasan,

Sedikit saya tambahkan background-position untuk mengatur antara jarak style dengan elemen dalam sebuah select tersebut .

Copy kode berikut dan tempelkan pada style masing - masing atau juga bisa tambahkan pada elemen style </head> .

select{
-moz-appearance:none;
-webkit-appearance:none;
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsGCAcIf0aE0QAAADFJREFUOMtjYBgFgw4wQun/ZOghKPmfUsOwKfhPiWG4FP0n1zB8Cv+TYxgh8H94pkMAEc4GBW/dMm0AAAAASUVORK5CYII=")no-repeat right;
background-size: 12px;
background-position: 98% 50%;
}

Untuk background urlnya sudah diset dengan image arrow yang awalnya merupakan gambar arrow dan sekarang sudah di encode base64 .

Pada background:position, valuenya merupakan posisi dari X dan Y, kalau anda sudah pernah mengenal garis kartesius pastinya sudah mengenal hal tersebut. Disitu, pada value background-position diberi X=98%; dan Y=50% ( imajinasikan seperti koordinat kartesius ) .

Pada baris ke 2, terdapat kode program no-repeat right merupakan untuk menempatkan style background tersebut pada bagian kanan sendiri dari elemen Select terebut . Bisa diubah dengan left dan center;

Dan juga lihat pada background-size:12px pada baris ke 3, itu merupakan mengubah ukuran background elemen .

Jangan lupa juga tambahkan moz dan webkit-appearance menjadi none, untuk menonaktifkan style pada browser firefox dan google chrome .

Silahkan melakukan eksperimen sendiri jika ingin menggali lebih dalam kode tersebut .

Advertisement

Advertisement