如何使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