我似乎无法摆脱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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。