Aligning the background image of a dropdown select option to right

Question

I am trying to add background images to the select options of a dropdown.

This is the code I am using:

<html>
<head>
<style>

    .flag16
    {   
        height:16px;
        width:16px;
        background:url(http://imgur.com/l2KaB.png) no-repeat;
    }

    .flag16.us{background-position:0 -3664px;}
    .flag16.il{background-position:0 -1824px;}
    .flag16.in{background-position:0 -1856px;}
    .flag16.it{background-position:0 -1920px;}

</style>
</head>
<body>

    <select id="my_select" style="width: 180px;height:20px;">
    <option value="some Value 1" class="flag16 us">USA</option>
    <option value="some Value 2" class="flag16 il">Israel</option>
    <option value="some Value 3" class="flag16 in">India</option>
    <option value="some Value 4" class="flag16 it">Italy</option>
    </select>

</body>
</html>

JSFiddle here: http://jsfiddle.net/26Wgq/4/

How do I get all the images to align to the right?

Also, this snippet works only in Firefox. How to get it working in all browsers?

One option would be to start by Googling `background image dropdown`. I'm sure there is plenty of information about this issue (especially compatibility - not all browsers support this), and good examples. — Pekka, Oct 26 '12 at 07:50
I don't think it will work like this in all browsers.. you can use a js plugin for stylizing the form elements — Mihai Matei, Oct 26 '12 at 07:52
You cant set .flag16 { width: 16px } as you would want the option label to be wider than 16px — jtheman, Oct 26 '12 at 07:55

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

Probably wont work with CSS for all Browsers. Also found this: HTML <select> selected option background-color CSS style

but I will keep my eye on that, Used to do it via JS/Jquery only... maybe there is a better way.

cheers

edited May 23 '17 at 11:52

Community

1
1

answered Oct 26 '12 at 07:57

yogee

159
1
11

score 0 · Answer 2 · edited Oct 13 '15 at 15:39

I think it will be good if you try this one. I know this is not a solution but it can do what you want, just think about this:

<select id="my_select" style="width: 180px;height:20px;">
    <option value="some Value 1" class="flag16 us">USA<span class="as"><img src="usa.jpg" /></span></option>
    <option value="some Value 2" class="flag16 il">Israel<span class="as"><img src="Israel.jpg" /></span></option>
    <option value="some Value 3" class="flag16 in">India<span class="as"><img src="India.jpg" /></span></option>
    <option value="some Value 4" class="flag16 it">Italy<span class="as"><img src="Italy.jpg" /></span></option>
</select>

Now just create the css for the images and this is not that big thing :)

Aligning the background image of a dropdown select option to right

2 Answers2