Icons for Select Menu Options in (X)HTML/CSS

The HTML Select menu is notoriously inflexible for designers - as is many other form controls. I will try to remedy this is a small way. I will add a small icon to the left of all options - a different icon for each option. See Demo.Warning : This script will not work in IE.

This is what I propose to do...

HTML Code

<label for="some_countries">Straight Forward</label>
<select name="some_countries" id="some_countries" class="icon-menu">
<option style="padding-left:0px;" value="">Select a Country</option>
<option style="background-image:url(flags/usa.png);" value="US">USA</option>
<option style="background-image:url(flags/india.png)" value="IN">India</option>
<option style="background-image:url(flags/england.png);" value="UK">England</option>
<option style="background-image:url(flags/france.png);" value="FR">France</option>
<option style="background-image:url(flags/germany.png);" value="GE">Germany</option>
<option style="background-image:url(flags/canada.png);" value="CA">Canada</option>
<option style="background-image:url(flags/russia.png);" value="RU">Russia</option>
</select>

CSS

select.icon-menu option {
background-repeat:no-repeat;
background-position:bottom left;
padding-left:30px;
}

This is enough to create the desired effect in Firefox. Of course, you must have the images of all the required flags. However, there is a problem with this code - inline CSS is used in the above example. If you want to separate presentation from content, you could use the following code...

HTML

<select name="countries" id="countries" class="icon-menu">
<option value="">Select a Country</option>
<option value="US">USA</option>
<option value="IN">India</option>
<option value="UK">England</option>
<option value="FR">France</option>
<option value="GE">Germany</option>
<option value="CA">Canada</option>
<option value="RU">Russia</option>
</select>

CSS

select.icon-menu option {
background-repeat:no-repeat;
background-position:bottom left;
padding-left:30px;
}
select#countries option[value="US"] {
background-image:url(flags/usa.png);
}
select#countries option[value="IN"] {
background-image:url(flags/india.png);
}
select#countries option[value="UK"] {
background-image:url(flags/england.png);
}
select#countries option[value="FR"] {
background-image:url(flags/france.png);
}
select#countries option[value="GE"] {
background-image:url(flags/germany.png);
}
select#countries option[value="CA"] {
background-image:url(flags/canada.png);
}
select#countries option[value="RU"] {
background-image:url(flags/russia.png);
}

Explanation

This example makes use of more advanced(Level 2) selectors to do the job.

select#countries option[value="IN"] {
background-image:url(flags/india.png);
}

This means that all option with value "IN" will be given the background image 'flag/india.png'.

Usage

So we come to the real question - do we use it? This will not working in IE - effectively making it useless for almost 90% of our visitors. Still, I will recommend that we use it - the code degrades beautifully if the browser don't support the option, it will show a default select menu - no mess, no fuss.

Filed Under...

• html
• css
• web
• development