How can I add an icon to select box choices?

Question

Basically I have a text box with a modifier dropdown. I would like an icon of the current choice to display when chosen. The problem with the current set-up (using UNICODE) is that the icons do not always display, such as on google chrome (unless the specific fonts have been installed).

For example see the Fiddle: https://jsfiddle.net/q5eLLu2h/

<select class="squareDropdown" id="da" name="da">
  <option value="AND">➕&nbsp; AND</option>
  <option value="EXCEPT">➖&nbsp; EXCEPT</option>
  <option value="OR"><b>O</b>&nbsp; OR</option></select>
<input class="textArea" id="d" name="d" placeholder="d" type="text" />
<br>
<br>
<br>
<select class="squareDropdown" id="ca" name="ca">
<option value="OR"><b>O</b>&nbsp; OR</option>
<option value="AND">➕&nbsp; AND</option>
<option value="EXCEPT">➖&nbsp; EXCEPT</option>
</select>
<input class="textArea" id="c" name="c" placeholder="c" type="text" />  

Does anyone have any advice on what I could do? Either a way to get the unicode icons to display (like through forcing the person to download them?) or a simple way to get pictures or images into a select box, or anything really. Jquery UI is installed, is there anything I can do with it?

Thank you

Answer 1

Options are hard to style.

The basic reason is that they are reaching into the operating system for generation rather than being generated solely by the browser like most other website HTML elements.

This is why file upload form field 'submit' buttons don't follow the same rules as any other submit buttons on a form.

Here is some more detail about limited and inconsistent possibilities and a question that proves <option> can't have any children (this in turn stops the psuedo-elements from working, unfortunately, as psuedo elements are rendered like DOM nodes).

All this means that using an icon font won't work either as you'd need to target just the bit with icon in, which you could only do with extra child elements.

Using JQuery

There are many ways of mimicking select option form fields with various javascript plugins that will give you more control, however, they come with an important caveat. Standard select elements bring with them all the extra usability and accessibility features (such as keyboard focus and operation) javascript plugin writers don't necessarily think about, so use with care.

It's also worth remembering that when you are replacing complex functionality with JQuery you've got quite a lot of overhead in testing / development - select elements do just work in all browsers, without their actual functionality needing testing. This is more considerable if you do pay attention to all the accessibility points.

The MDN article does however judge that this is the best way and lists some good plugins for a solution, which I would use as MDN can be trusted to have considered all the important stuff I mention above.

For the sake of link rot, here are the two of the three they recommend that link to a product still:

UniForm

FormalizeMe

(please note, I haven't tried these, I'm just trusting Mozilla!)

Unicode

You are trying to use unicode in your option tags. This should work, and without forcing a download on the user if you:

• Use a font that has the unicode characters you want to use defined.
• Ensure that you have the charset in your docs set to utf-8

However, you'll only ever get characters, never styleable icons and you might be stuck with websafe or proprietary fonts.

This jsfiddle here demonstrates with the web-safe font-family: sans-serif and also characters taken from this link with a big list of those that are commonly supported

And finally

For small option sets radio buttons are probably better. The user can immediately see the available options rather than having to open them each time (better learnability, faster cognition); plus, they can make their desired selection, or change their desired selection with just one click each time. The guys over at UX.SE discuss what to use further, raising other points.

All your problems might just disappear if you think about whether <select> is the best option.