How do I add a horizontal line in a html select control?

Question

How do I add a horizontal line (<hr> tag) in the dropdown control or in select control in HTML?

Answer 1

I've run into this issue before and the only cross-browser way to achieve this is to use unicode box drawing horizontal characters. Browsers don't render spaces between these characters. Of course that also means that your page must accept unicode (utf-8) which is almost a given these days.

Here is a demo, this one using a "light horizontal" box mark:

<option value="" disabled="disabled">─────────────────────────</option> 

There are various unicode box character options you can use as separator which should be rendered without spaces between them:

"─", "━", "┄", "┅", "┈", "┉"

More about unicode box drawing characters here: http://www.duxburysystems.com/documentation/dbt11.2/miscellaneous/Special_Characters/Unicode_25xx.htm

You can also include them using HTML escape chars (copy and paste usually works by inserting the box characters' UTF-8 sequence, which browsers seem to respect, but if that's not an option), this for four light horizontal box marks in a row:

────

which renders as

────

Answer 2

Generally speaking this is not a feature of <select>, most browsers have very poor styling control for that control. In Firefox you can do the following (though doesn't work in other browsers):

<select name="test">     <option val="a">A</option>     <option val="b" class="select-hr">B</option>     <option val="c">C</option>     <option val="d">D</option> </select> 

with CSS:

option.select-hr { border-bottom: 1px dotted #000; } 

But generally speaking, the only method is to put an option in with dashes, and try to make it unselectable.

<select name="test">     <option val="a">A</option>     <option val="b">B</option>     <option disabled="disabled">----</option>     <option val="c">C</option>     <option val="d">D</option> </select> 

See: http://jsfiddle.net/qM5BA/283/