Tùy chọn in nghiêng

Question

Có cách nào để duyệt ngang select options không?
Với CSS và HTML sau, FireFox hiển thị tùy chọn thứ hai bằng chữ in nghiêng, chứ không phải tùy chọn thứ ba.
Không có tùy chọn nào được in nghiêng trong IE 7 hoặc Safari.

<style> 
    option.bravo 
    { 
     font-style: italic; 
    } 
</style> 

<select> 
    <option>Alpha</option> 
    <option class="bravo">Bravo</option> 
    <option><i>Charlie</i></option> 
<select> 

Tôi có đúng khi giả định điều này là không thể?

Answer 1

Trang này có một biểu đồ tốt đẹp của hỗ trợ trình duyệt của phong cách lựa chọn, lựa chọn và optgroup: http://www.electrictoolbox.com/style-select-optgroup-options-css/

Theo đó, giống như phong cách lựa chọn duy nhất đó là qua trình duyệt là color.

Answer 2

@MikeWWyatt

Tôi biết nó được một lúc kể từ khi bạn hỏi, nhưng tôi tạo này:

1. Bọc trong một đoạn văn đó là position: relative
2. Tạo một yếu tố đó là vị trí tuyệt đối
3. Tùy chọn của bạn có cùng màu với màu nền bạn chọn
4. Sử dụng jQuery để thay đổi màu tùy chọn thành màu trắng (hoặc bất kỳ màu nào bạn muốn) bằng cách sử dụng .change () Cũng như ẩn

HTML

<p>I am a: <span class='pretend-option'>Please choose one</span> 

    <select name="example"> 
     <option disabled="disabled" selected="selected">Please choose one</option> 
     <option value="consumer">Consumer</option> 
     <option value="supplier">Supplier</option> 
     <option value="retailer">Retailer</option> 
    </select> 
</p> 

jQuery

 $('select').change(function() { 
      $(this).css('color', 'white'); 
      $(this).parent('p').children('.pretend-option').css('z-index', -1); 
    }); 

CSS

select, option { 
     -webkit-appearance: none; 
     -webkit-border-radius: 0px; 
     border-radius: 0; 
     display: block; 
    } 
    p { 
     position: relative; 
    } 
    select { 
     padding: 7px; 
     background-color: blue; 
     color: blue; 
    } 
    .pretend-option { 
     position: absolute; 
     bottom: 0.5em; 
     color: #fff; 
     left: 0.5em; 
     pointer-events: none; 
     z-index: 1; 
     font-style: italic; 
} 

Dưới đây là một fiddle nếu bạn quan tâm: https://jsfiddle.net/ej34bea0/