WeMakeSites

  • Portfolio
  • About
  • Blog
  • Music
  • Links
  • Contact
  • Adding Icons to the Option Elements of the Select Tag in Firefox. Quick and Dirty

    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:

    .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;
    }

    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.