html - 选择边框颜色

Question

我似乎无法摆脱 Opera 浏览器中 select 元素的边框(轮廓，框阴影？)。

以下规则均未删除边框:

select {
  /*border: 0;*/
  border: none;
  outline: 0;
  background: transparent;
  border-image: none;
  outline-offset: -2px;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
}

<select class="form-control">
  <option selected="selected" value="0">Most Popular</option>
  <option value="1">A-Z</option>
  <option value="2">Z-A</option>
  <option value="3">Lowest price</option>
  <option value="4">Highest price</option>
</select>

Opera 版本为 46.0.2597.57 (PGO)。

以上代码在其他经过测试的浏览器中运行良好——Chrome、Firefox、Internet Explorer 和 Edge。

任何提示都会有所帮助。

编辑我使用的是 Windows 10 64 位，这里是截图:

Answer 1

您可以使用 -webkit-appearance: none; 去除边框，但这也会删除插入符号，因此您可能必须再次手动添加。我找不到更好的答案，因为歌剧对这个边界真的很顽固。 (更新后的解决方案下方带有插入符号)

select {
  border: 0;
  outline: 0;
  background: transparent;
  border-image: none;
  outline-offset: -2px;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
  -webkit-appearance: none;
}

<select class="form-control" id="1">
  <option selected="selected" value="0">Most Popular</option> 
  <option value="1">A-Z</option>
  <option value="2">Z-A</option>
  <option value="3">Lowest price</option>
  <option value="4">Highest price</option>
</select>

更新的解决方案:这更像是一种变通方法，而不是解决方案，但它有一个有效的“假”插入符，看起来像一个无边框下拉菜单，即使在 Opera 中也是如此。

select {
  border: 0;
  outline: 0;
  background: transparent;
  border-image: none;
  outline-offset: -2px;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  width: 100% ;
  position: absolute;
}

.select-wrapper {
  position: relative;
  max-width: 100px;
}

.select-wrapper:after {
  content: "\25BE";
  float: right;
  margin-top: -3px;
}

<div class="select-wrapper" id="label-for-1">
  <select class="form-control" id="1">
    <option selected="selected" value="0">Most Popular</option>
    <option value="1">A-Z</option>
    <option value="2">Z-A</option>
    <option value="3">Lowest price</option>
    <option value="4">Highest price</option>
  </select>
</div>