在选择器中添加背景颜色

Question

我想在选择器中放一个绿色的小矩形。我尝试了很多，但找不到解决方案。

<select>
    <option value="all_clicks"  selected="selected" class="greenRect">All clicks</option>
    <option value="search_camp">Search campaigns</option>
    <option value="search_links">Search links</option>
    <option value="none">None</option>
</select>

.greenRect{
    height:15px;
    width:15px;
    backround:#7db22b;
    border-radius:2px;
}
​

http://jsfiddle.net/DVyQC/

类似于图中所示！请帮帮我。

Answer 1

你将无法使用普通标签来做到这一点，而你可以做的事情（你也能使它看起来很漂亮）是使用普通列表<ul><li>并重新创建选择器行为

Answer 2

你不太可能用CSS做到这一点。选择框是最不“风格”的元素之一。

这是一篇类似的帖子：How to add a images in select list

这个答案描述了仅适用于Fx的CSS解决方案。

Answer 3

在选项中这种方法是可行的，但这可以通过jquery或javascript

来完成

检查this有很多下拉列表

Answer 4

您可以使用msDropdown并创建不同的彩色矩形图像以放在每个选项上。 http://www.marghoobsuleman.com/jquery-image-dropdown

这肯定不如使用CSS那么顺利，但可能会有效。