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

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

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/

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:

&#x2500;&#x2500;&#x2500;&#x2500;

which renders as

────

The select element may only contain optgroup or option elements, and option elements may only contain text. Markup like <hr> is forbidden.

I would use an element like this to create a separator:

<option disabled role=separator>

You may consider markup like this:

<optgroup label="-------"></optgroup>

However, the rendering between different browsers varies a little too much to be acceptable.

You could use the em dash "—". It has no visible spaces between each character.

In HTML:

<option value disabled>—————————————</option>

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

<option>----------</option>

or

<option>__________</option>

but you can't write <option><hr /></option>

you could also add a css class to an empty <option> with a background image

<option class="divider"> </option>

This is an old post, but I ran into a lot of posts in which no one even bother to find a elegant solution, although it is simple.
Everyone is trying do ADD something into between <option> tags, but no one thought about STYLING the <option> tag, which is the only way to do it and to look amazing.

To easy to be true ? Look

<select>
    	<option>First option</option>
        <option>Second option</option>
        <option>Third option</option>
        <option style="border-bottom:1px solid rgba(153,153,153,.3); margin:-10px 0 4px 0" disabled="disabled"></option>
        <option>Another option</option>
		<option style="border-bottom:1px solid rgba(153,153,153,.3); margin:-10px 0 4px 0" disabled="disabled"></option>
        <option>Something else</option>
    </select>

I've placed the style with the html for ease.

This doesn't work anymore, it's clear, don't know why people keep posting answers. The rules changed, this solution worked, I've been using it myself. Nowadays I'm using jQuery plugins for this.

Lates edit: Everyone can use the amazing selectpicker plugin

Dropdown plugin

If you want to insert a seperator of sorts into a tag, you can do something like this: http://jsfiddle.net/k4emic/4CfEp/ However, this isn't recommended practice.

I used JSP but you will see that is same. I am iterating through a brandMap LinkedHashMap where if key >= 50000, then it is a line separator, else is a normal select option. (I need that in my project)

<c:forEach items="${brandMap}" var="entry">
   <c:if test="${entry.key ge 50000}">
     <option value=${entry.key} disabled>&ndash;&ndash;&ndash;&ndash;</option>
   </c:if>
   <c:if test="${entry.key lt 50000}">
     <option value=${entry.key}>${entry.value}</option>
   </c:if>

Simple Way :

<h2 style="
    font-family:Agency FB;
    color: #006666;
    table-layout:fixed;
    border-right:1px solid #006666;
    border-right-width:400px;
    border-left:1px solid #006666;
    border-left-width:400px;
    line-height:2px;"
align="center">&nbsp;Products&nbsp;</h2>