Add a background color in selector

Question

I wanted to put a small rectangle of green color in a selector. I tried a lot but could not find a solution.

<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/

Similar to shown in figure! Please help me.

enter image description here

score 1 · Answer 1 · answered Oct 09 '12 at 16:12

1

Well you won't be able to do that using the normal tag, instead what you can do (and you also be able to make it look pretty) is to use a normal list <ul><li> and recreate the selector behavior

answered Oct 09 '12 at 16:12

Caelea

2,318
15
22

score 1 · Accepted Answer · edited May 23 '17 at 10:32

1

You will not likely be able to do this with CSS. Select boxes are one of the least 'styleable' elements.

Here's a similar post: How to add a images in select list

This answer describes a CSS solution for Fx only.

edited May 23 '17 at 10:32

Community

1
1

answered Oct 09 '12 at 16:17

Kevin Boucher

16,426
3
48
55

score 1 · Answer 3 · edited Oct 09 '12 at 16:27

1

in the option this type of approach can be possible but this can be done by jquery or javascript

check this there are many dropdown

edited Oct 09 '12 at 16:27

karthikr

97,368
26
197
188

answered Oct 09 '12 at 16:18

NullPoiиteя

56,591
22
125
143

score 1 · Answer 4 · answered Oct 09 '12 at 16:19

1

You could use msDropdown and create different colored rectangle images to put on each option. http://www.marghoobsuleman.com/jquery-image-dropdown

This is certainly not as smooth as using CSS but it might work.

answered Oct 09 '12 at 16:19

judehall

884
12
27

Add a background color in selector

4 Answers4