Juli 18, 2018

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

About The Author

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]

Related posts

1 Comment

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

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *