选择边框颜色

Question

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

以下规则均未删除边框：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

如果border: 1px solid white背后有扎实的背景，则可以使用类似select的内容重叠Opera的边框。

或者您可以通过针对特定浏览器的CSS黑客为您的select应用自定义样式的webkit浏览器，使用-webkit-appearance: none删除标准外观并将SVG background-image应用于标准箭头。这样，IE和Firefox的标准外观将完好无损。

select {
  border: 0;
  outline: 0;
  background-color: transparent;
}


/* Select only webkit browsers */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  select {
    /* remove arrow */
    -webkit-appearance: none;
    /* add some padding for image */
    padding-right: 15px; 
    /* apply SVG with arrow */
    /* change width value to move arrow to the left */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" viewBox="0 0 15 15"><path d="M 8,5.5 11,9.5 14,5.5 z"></path></svg>');
    background-repeat: no-repeat;
    background-position: center right;
  }
}

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