如何使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上测试它，而我的Firefox和Chrome是最新的。

Answer 1

试试这个，它应该有效 https://github.com/necolas/normalize.css

Answer 2

我所达到的只是目前为止：

see here

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

仍然需要找到增加opera或top值的填充的方法

我找到了一个链接，我想如果你曾经通过它我将会有所帮助

How to make CSS visible only for Opera

这也是

Select removing dropdown arrow