Javascript 如何使html选择框在所有平台上的所有浏览器中看起来相同

大家好，我正在解决一个问题，让选择框在所有浏览器中看起来都一样——Chrome、Safari、Firefox、Opera、IE在所有平台上都一样。目前，我的选择框在Firefox和Chrome中工作正常，但当我切换到Opera和IE时，它的行为与Firefox或Chrome不同。我还没有在Safari上试过。我怎么能做到呢

还有一件事我想知道的是，有没有可能让选项标签在所有浏览器中看起来都像在Firefox中当前的fiddle中一样？？到目前为止，我所研究的是，仅使用UL LI是不可能的

HTML

CSS

小提琴：

---

注意：我正在Opera 12.12和IE 11.0上测试它，我的Firefox和Chrome是最新的。

试试这个，它应该可以工作

---

我所能达到的只有这么远：

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

我找到了一个链接，如果你能浏览一下，我想我会很有帮助的

还有这个

---

你不能，除非你使用像select2这样的自定义元素。这是因为不同的浏览器对渲染元素有不同的默认设置。我认为你的css中缺少-o-支持，用于opera@codenut，我尝试过，但不起作用…不，这不起作用，在firefox中，选择元素的宽度不同

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

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;
}

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