Bagaimana cara menata <option> hanya dengan CSS?

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.

Saya ingin bergaya seperti ini atau sedekat mungkin.

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?

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>

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.

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 ...

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.