我有这个样本:
代码HTML:
<div class="select-style"> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </div>
代码CSS:
.select-style { padding: 0; margin: 0; border: 1px solid #ccc; width: 120px; border-radius: 3px; overflow: hidden; background-color: #fff; background: #fff url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif") no-repeat 90% 50%; } .select-style select { padding: 5px 8px; width: 130%; border: none; Box-shadow: none; background-color: transparent; background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .select-style select:focus { outline: none; }
我画了一张照片,更好地了解我想做的事情.
我如何在我的架构上这样做?
目前的结构是什么?还是有另一个结构创建HTML?
提前致谢!
解决方法
你想要这样的东西吗?
http://codepen.io/anon/pen/bVWmgP
.select-style:after { content: ''; background-color: #000; position: absolute; border-left: 3px solid #F00; z-index: 0; top: 0; right: 0; bottom: 0; left: 85px; } .select-style:before { content: ''; background-color: white; position: absolute; z-index: -20; top: 0; right: 0; bottom: 0; left: 0; }
注意:您无法更改选择列表箭头颜色,而不添加将表示该箭头的额外图像.
原文地址:https://www.jb51.cc/html/229448.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。