如何使HTML選擇框在所有平臺上的所有瀏覽器中看起來相同

Question

您好，我正在解決一個問題，使所有瀏覽器（Chrome，Safari，Firefox，Opera，IE）在所有平臺上的選擇框都相同。目前我的選擇框在Firefox和Chrome中工作相同但是當我切換到Opera和IE時。它的行爲與Firefox或Chrome不同。我還沒有在Safari上試過它。我該怎麼做？

我還想知道的另一件事是「是否有可能使選項標籤在所有瀏覽器中都與當前小提琴中的Firefox中出現的相同？」到目前爲止，我所研究的是，僅用UL LI是不可能的。

HTML

<label> 
    <select> 
    <option value="">Choose Category</option> 
    <option value="">Category1</option> 
    <option value="">Category2</option> 
    <option value="">Category3</option> 
    </select> 
</label> 

CSS

select{ 
    margin: 0; 
    background: #fff; 
    color:#333; 
    border:1px solid #ccc; 
    outline:none; 
    display: inline-block; 
    -webkit-appearance:none; 
    -moz-appearance:none; 
    appearance:none; 
    width:40%; 
    padding:0 5px; 
    height:36px; 
    -webkit-padding-before:8px; 
    -webkit-padding-after:8px; 
    font-size:14px; 
    cursor:pointer; 
} 

select option{ 
    padding:8px 5px; 
} 


label {position:relative} 
label:after { 
    content:'<>'; 
    font:14px "Consolas", monospace; 
    color:#333; 
    -webkit-transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    transform:rotate(90deg); 
    right:8px; top:0px; 
    padding:0 0 2px; 
    border-bottom:1px solid #ddd; 
    position:absolute; 
    pointer-events:none; 
} 
label:before { 
    content:''; 
    right:6px; top:0px; 
    width:20px; height:20px; 
    background:#fff; 
    position:absolute; 
    pointer-events:none; 
    display:block; 
} 

小提琴：https://jsfiddle.net/6cf3Lfy6/

注：我在Opera 12.12和IE 11.0和M測試它Firefox和Chrome是最新的。

Answer 1

只是試試這個，它應該工作 https://github.com/necolas/normalize.css

Answer 2

所有我到達的這一步：

see here

padding:0px 5px 2px; 
-o-transform:rotate(90deg); 

仍然需要找到方法來增加填充在歌劇或最高價

我已經找到了一個鏈接，我想我會是有益的，如果你去通過它

How to make CSS visible only for Opera

這也太

Select removing dropdown arrow