Adding Icons to the Option Elements of the Select Tag in Firefox. Quick and Dirty

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

Below is a quick and dirty solution for adding icons to the <option /> elements of the <select /> tag utilizing CSS generated content.

Disclaimer: According to the CSS specs, the <option /> element should not support generated content, and this solution works only in Firefox. Anyways, it may come handy sometime.

The Result:

thumb

The CSS:

[sourcecode language=”css”]
.acidjs-cssw-select-icons option::before
{
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin: 2px 6px 2px 2px;
    width: 16px;
    height: 16px;
    background: url("path/to/the/icon.png") no-repeat center;
}
[/sourcecode]

The demo and the download link are on this page. If you are interested in more CSS3, HTML5 WebComponents and JavaScript stuff, make sure you check my experiments website.

Categories and Tags
Links

© 2006 - 2023 Martin Ivanov