html – 如何把背景颜色只有一部分选择？ CSS

概述我有这个样本： link 代码HTML： <div class="select-style"> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option va 我有这个样本：

link

代码HTML：

<div >  <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;    }

注意：您无法更改选择列表箭头颜色,而不添加将表示该箭头的额外图像.

总结

以上是内存溢出为你收集整理的html – 如何把背景颜色只有一部分选择？ CSS全部内容，希望文章能够帮你解决html – 如何把背景颜色只有一部分选择？ CSS所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。