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