html – 选择边框颜色

发布时间：2020-12-14 16:43:45 所属栏目：资源来源：网络整理

导读：我似乎无法摆脱Opera浏览器中select元素的边框(轮廓,box-shadow？). 以下规则均未删除边框： select { /*border: 0;*/ border: none; outline: 0; background: transparent; border-image: none; outline-offset: -2px; border-color: transparent; outline-

我似乎无法摆脱Opera浏览器中select元素的边框(轮廓,box-shadow？).

以下规则均未删除边框：

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位,这是一个截图：

解决方法

您可以使用-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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!