Làm cách nào để tạo kiểu cho <option> chỉ với CSS?

Lưu ý: Câu hỏi này không phải về việc tạo một menu thả xuống tùy chỉnh. Nó chỉ về khả năng tạo kiểu của <option>các phần tử trong phần tử được chọn trong CSS

Làm cách nào để tạo kiểu <option>cho một <select>phần tử có khả năng tương thích trên nhiều trình duyệt? Tôi biết nhiều cách JavaScript tùy chỉnh trình đơn thả xuống để chuyển đổi thành <li>, điều mà tôi không hỏi về nó.

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

Tôi đang hỏi điều gì có thể làm được chỉ với CSS, với khả năng tương thích cho IE9 +, Firefox và Chrome.

Tôi muốn tạo kiểu như thế này hoặc càng gần càng tốt.

Tôi đã thử tại đây http://jsfiddle.net/jitendravyas/juwz3/3/ , nhưng Chrome không hiển thị bất kỳ kiểu nào ngoại trừ màu phông chữ, trong khi Firefox hiển thị một số kiểu khác. Làm cách nào để đường viền và phần đệm cũng hoạt động trong Chrome?

EDIT 2015 tháng 5

Tuyên bố từ chối trách nhiệm: Tôi đã lấy đoạn mã từ câu trả lời được liên kết bên dưới:

Cập nhật quan trọng!

Ngoài WebKit, kể từ Firefox 35, chúng tôi sẽ có thể sử dụng thuộc appearancetính:

Sử dụng -moz-appearancevới nonegiá trị trên hộp kết hợp bây giờ loại bỏ nút thả xuống

Vì vậy, bây giờ để ẩn kiểu mặc định, thật dễ dàng bằng cách thêm các quy tắc sau vào phần tử chọn của chúng tôi:

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

Để được hỗ trợ IE 11, bạn có thể sử dụng [ ::-ms-expand] [15].

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

Câu trả lời cũ

Thật không may, những gì bạn yêu cầu không thể thực hiện được bằng cách sử dụng CSS thuần túy. Tuy nhiên, đây là một cái gì đó tương tự mà bạn có thể chọn làm công việc xung quanh. Kiểm tra mã trực tiếp bên dưới.

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>

BIÊN TẬP

Đây là câu hỏi mà bạn đã hỏi một thời gian trước. Làm cách nào để tạo kiểu trình đơn thả xuống <select> chỉ với CSS mà không có JavaScript? Như nó nói ở đó, chỉ trong Chrome và ở một mức độ nào đó trong Firefox, bạn mới có thể đạt được những gì mình muốn. Nếu không, thật không may, không có giải pháp CSS thuần túy trình duyệt chéo nào để tạo kiểu cho một lựa chọn.

Không có cách trình duyệt chéo nào về các yếu tố tùy chọn tạo kiểu, chắc chắn không ở phạm vi ảnh chụp màn hình thứ hai của bạn. Bạn có thể làm cho chúng in đậm và đặt kích thước phông chữ, nhưng đó sẽ là vấn đề ...

Tôi đã chơi xung quanh với các mục được chọn trước đây và không ghi đè chức năng bằng JavaScript, tôi không nghĩ điều đó có thể thực hiện được trong Chrome. Cho dù bạn sử dụng một plugin hay viết mã của riêng mình, CSS chỉ không phù hợp với Chrome / Safari và như bạn đã nói, Firefox xử lý nó tốt hơn.