Css style select option dengan custom sendiri

Css style select option dengan custom sendiri

Css style select option dengan custom sendiri, adalah trik untuk mengkustomisasi tampilan dari element select yang biasanya di gunakan untuk opsi kepada user untuk memilih dalam sebuah form.

untuk mengkustom tampilan select option itu menurut saya gampang-gampah susah, bagaimana kok gampang, gampang karena element select sebenarnya jarang kita gunakan khususnya dalam membangun sebuah template atau website, jarang artinya bisa jadi 1 atau 2 kali element ini tetap harus kita pakai atau gunakan, nah itulah susahnya, menjadi susah karena duit lagi sentiment ama aq tag select dan tag tag di dalamnya tidak memiliki class yang dapat kita style sesuka hati kita, bilapun kita menambahkan class dalam select yang kita buat paling kita hanya bisa mengatur stylenya sebatas border, background, pandding, margin, atau border radius. sedang element vitas berupa panah atau tanda dropdown default dari tag select yang terkesan jadul, seolah-olah menjadi dewa yang tidak bisa kita gangu gugat keberadaan nya. mau di display none juga ngk bisa karena tanda panah tersebut tidak mempunyai tag, id, class, attribut atau apalah sebutannya yang bisa kita exsplor dalam file css.

tapi tenang para jamaah, dengan hadirnya css3 yang menghimpun kekuatan dari 4 unsur api, air, udara, angin serta kesempurnaannya menguasai taichi, akhirnya kekuatan style select option dengan kutukannya yang mengerikan dapat di lumpuhkan dengan melalui pertarungan sengit sampai beberapa episode. setelah kutukan selec option dapat di taklukkan oleh kekuatan super css3 akhirnya kita bisa mengkustom style dari select option seperti apa yang kita inginkan, walau belum semua style default dari select option dapat kita custom dengan css. namun bagian-bagian dasar yang terlihat setidaknya sudah bisa kita custom hanya dengan css.
oke cingguderi… jangan kepanjangan mukadimah langsung saja kita hajar select option dengan kekuatan css yang super duper maju mundur cantik…cantik… 🙂
lest do it.

custom-select-dengan-css

mari kita buat contoh html kurang lebih seperti di bawah ini. untuk lebih mudahnya sebaiknya anda copast langsung saja kode-kode nya dari sini setelah anda faham baru anda custom sendiri, seperti yang anda inginkan.
html code

kemudian pada file css nya silahkan anda masukkan kode seperti di bawah ini

perhatikan pada bagian ini background : #6e0cc url(url-gambar) no-repeat 95% 50%;   jangan lupa untuk mengganti tulisan di dalam kurung “url-gambar” dengan url gambar yang ingin anda gunakan sebagai tanda panah bawah di mana gambar tersebut akan mengindikasikan bahwa field tersebut adalah sebuah tag select, karena dengan css di atas tanda panah default dari select option tidak akan lagi terlihat, kunci dari css di atas adalah pada bagian ini :
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance:none;
        background: #6e00cc url(url-gambar) no-repeat 95% 50%;
        width: 100px;
        text-indent: 0.01px;

hasil dari kerja keras banting tulang sampai pergi pagi pulang malam bahkan sampai ngk pulang-pulang 2 kali puasa 2 kali lebaran karena ngak mau pulang maunya di goyang,, ngk mau pulang maunya di goyang.. 😀 menuliskan file html dan css di atas penampakan nya dapat di lihat di sini Link


Bagaimana Tanggapan Anda Tentang Artikel Css style select option dengan custom sendiri Ini ?..
1
Suka Suka

Tidak Suka

Membosankan

This post was written by...

– has written 107 posts on Ari Warna.

seorang programer sudah barang tentu tahu dan jago tentang code php, css, html, javascript dan temen-temennya, namun tidak semua programer tahu dan handal tentang kode yang di berikan oleh makluk yang paling misterius yaitu WANITA. di sini ada sisi lain tentang curahan hati canda dan tangis programer autis. ariwarnadotcom [programer juga manusia]

Contact the author

Silence is gold, but talk about a good thing is a pearl.
lets say something about the article in a comment below, or just to saying hello

One Response to “Css style select option dengan custom sendiri”

  1. Edit Potho Dengan Pothoshop effect unyu-unyu - Ari Warna

    […] lain dari biasanya, dimana biasanya pada blog ini akan di Posting artikel tentang tutorial  HTML, CSS, PHP, atau JAVASCRIPT, atau info-info seputar dunia IT, dan juga artikel-artikel yang nggak penting […]

    Reply

Leave a Reply