0

How do I add icons to a multiselect component?

I have found a Firefox only solution (see my answer below); but have found nothing interoperable.

Should I just give up on this feature?

A T
  • 13,008
  • 21
  • 97
  • 158

1 Answers1

0

Firefox only solution was found here: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-multiple-option, with:

HTML:

<select id="el03" size="3" multiple="">
    <option selected="">
        #el03 Option 1
    </option>
    <option>
        #el03 Option 2
    </option>
    <option>
        #el03 Option 3
    </option>
    <option>
        #el03 Option 4
    </option>
    <option>
        #el03 Option 5
    </option>
</select>

CSS:

#el03 option {
    background: url("/i/icon-info.gif") no-repeat scroll 100% 50% transparent;
}

Run the code: http://plnkr.co/edit/ZPnRq0REy0LN8eDKHWni?p=preview

A T
  • 13,008
  • 21
  • 97
  • 158