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

Question

您好，我正在解决一个问题，使选择框在所有平台上的所有浏览器(Chrome、Safari、Firefox、Opera、IE)中看起来都相同。目前我的选择框在 Firefox 和 Chrome 中工作相同，但是当我切换到 Opera 和 IE 时。它的行为与 Firefox 或 Chrome 不同。我还没有在 Safari 上尝试过。我怎样才能做到这一点？

我想知道的另一件事是“是否可以使选项标记在所有浏览器中看起来与当前 fiddle 中的 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;
}

fiddle : https://jsfiddle.net/6cf3Lfy6/

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

Answer 1

我所达到的就是这么远:

see here

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

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

我找到了一个链接，如果您浏览一下它，我想我会对您有所帮助

How to make CSS visible only for Opera

还有这个

Select removing dropdown arrow