Style individual <option> tags in a <select> list

HTML & CSS
1

I’m using Drupal, but think this is more of a CSS issue rather than a Drupal one.

I have a number of prefixes in use which have a variety of different styles, these are currently presented as the raw HTML in the drop down, what would look much better for the users is to have these styled correctly.

An example would be

<select>
<option value="<em>d</em>."><em>d</em>.</option>
<option value="<em>d</em>.<em>s</em>.<em>p</em>,"><em>d</em>.<em>s</em>.<em>p</em>,</option>
</select>

So I’d like the displayed text in the drop down to show the styled HTML rather than the raw HTML that it does now.

I’ve seen various articles on how to style the entire select control, but nothing on how to style individual option values.

Is there any way to do this with pure HTML/CSS? Alternatively can I manipulate the browser with a bit of JavaScript to achieve the same result?

2

Hi there monaghan,

“Some elements simply can’t be styled using CSS. These include: all advanced user interface widgets, such as color or date controls; pretty much the range control; and all the dropdown widgets, including <select> , <option> , <optgroup> and <datalist> elements. The range input type is notoriously difficult to style, but it is possible. The <progress> and <meter> elements have limited styability, and risk losing the visual cues that make them relevant when styled. The file picker widget is also known not to be stylable cross browser.”

Source:-

MDN - Styling HTML forms

coothead

2 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.