我有这个样本：
代码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;
}
注意：您无法更改选择列表箭头颜色,而不添加将表示该箭头的额外图像.
