Bagaimana cara menata <option> hanya dengan CSS?

102

Catatan: Pertanyaan ini bukan tentang membuat dropdown kustom. Ini hanya tentang kemungkinan <option>elemen gaya dalam elemen pilih di CSS

Bagaimana saya bisa gaya <option>s dari <select>elemen dengan kompatibilitas cross-browser? Saya tahu banyak cara JavaScript yang menyesuaikan dropdown untuk diubah menjadi <li>, yang tidak saya tanyakan.

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

Saya bertanya apa yang bisa dimungkinkan dengan CSS saja, dengan kompatibilitas untuk IE9 +, Firefox, dan Chrome.

masukkan deskripsi gambar di sini

Saya ingin bergaya seperti ini atau sedekat mungkin.

masukkan deskripsi gambar di sini

Saya mencoba di sini http://jsfiddle.net/jitendravyas/juwz3/3/ , tetapi Chrome tidak menampilkan gaya apa pun kecuali warna font, sementara Firefox menampilkan lebih banyak. Bagaimana cara mendapatkan border dan padding bekerja di Chrome juga?

css html-select Jitendra Vyas
sumber
@ManseUK - Ini hanya tentang <option>bukan keseluruhan dropdown
Jitendra Vyas
2
@ManseUK: Saya tidak yakin itu sama. Pertanyaan itu menanyakan apakah Anda dapat mengatur gaya tampilan <select>elemen di halaman. Pertanyaan ini menanyakan apakah Anda dapat mengatur gaya daftar <option>elemen.
Andy E
13
Demi Tuhan, ini BUKAN duplikat dari SALAH SATU dari dua pertanyaan terkait (yang sebenarnya berbeda satu sama lain). Satu semata-mata tentang menata pilih dan bukan opsi, sementara yang satu ini menanyakan tentang juga menata opsi, dan yang lainnya tidak memiliki satu-satunya persyaratan-css / no-js.
matteo
12
Saya muak melihat pertanyaan yang salah ditandai sebagai duplikat, atau ditutup secara salah, tetap demikian selama bertahun-tahun meskipun telah terbukti salah.
matteo
2
@ovokuro codepen.io/lambder/pen/NbmwRb
Lambder

Jawaban:

70

EDIT 2015 Mei

Penafian: Saya telah mengambil cuplikan dari jawaban yang ditautkan di bawah ini:

Pembaruan Penting!

Selain WebKit, mulai Firefox 35 kami akan dapat menggunakan appearanceproperti:

Menggunakan -moz-appearancedengan nonenilai pada kotak kombo sekarang hapus tombol dropdown

Jadi sekarang untuk menyembunyikan gaya default, semudah menambahkan aturan berikut pada elemen pilih kami:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

Untuk dukungan IE 11, Anda dapat menggunakan [ ::-ms-expand] [15].

select::-ms-expand { /* for IE 11 */
    display: none;
}

Jawaban Lama

Sayangnya apa yang Anda tanyakan tidak dimungkinkan dengan menggunakan CSS murni. Namun, berikut adalah sesuatu yang serupa yang dapat Anda pilih sebagai solusi. Periksa kode langsung di bawah ini.

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }
<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>
Luaskan cuplikan

EDIT

Inilah pertanyaan yang Anda ajukan beberapa waktu lalu. Bagaimana cara mengatur gaya dropdown <select> dengan CSS hanya tanpa JavaScript? Seperti yang dikatakan di sana, hanya di Chrome dan sampai batas tertentu di Firefox Anda dapat mencapai apa yang Anda inginkan. Jika tidak, sayangnya, tidak ada solusi CSS murni lintas browser untuk menata gaya tertentu.

Savas Vedova
sumber
3
+1 terima kasih itu kode yang bagus. tetapi dalam kasus saya, saya ingin melakukannya <select>. penggunaan <div>secara semantik tidak benar.
Jitendra Vyas
2
@JitendraVyas, saya tahu, tapi seperti yang saya jawab, itu tidak mungkin. Apa yang telah Anda capai pada gambar pertama adalah yang paling bisa Anda lakukan. Lihat edit th. Ngomong-ngomong, saya juga menjawab pertanyaan Anda sebelumnya, silakan lihat.
Savas Vedova
Bagian 'pembaruan penting' menyimpulkan bahwa Anda dapat memberi gaya optiontag dengan css, tetapi Anda tidak bisa, Anda hanya dapat memberi gaya pada selecttag. Yang ditunjukkan dalam jawaban ini
svnm
Berikut adalah versi JavaScript dari contoh di atas yang menambahkan panggilan balik dan beberapa fitur berguna lainnya: dynamicdrive.com/dynamicindex1/ergodropdown.htm
coco puffs
4

Tidak ada cara lintas-browser untuk mengatur gaya elemen, tentu saja tidak sampai pada tangkapan layar kedua Anda. Anda mungkin bisa membuatnya tebal, dan mengatur ukuran font, tapi itu saja ...

danwellman
sumber
2

Saya telah bermain-main dengan item tertentu sebelumnya dan tanpa menimpa fungsionalitas dengan JavaScript, saya rasa itu tidak mungkin di Chrome. Baik Anda menggunakan plugin atau menulis kode Anda sendiri, hanya CSS yang tidak bisa digunakan untuk Chrome / Safari dan seperti yang Anda katakan, Firefox lebih baik dalam menanganinya.

cchana.dll
sumber
Harap hapus paragraf terakhir - URL tidak dapat diakses secara online.
kumarharsh