How do I add a horizontal line (<hr>
tag) in the dropdown control or in select control in HTML?
-
2why do you want to do this and how is this jquery related?– crodjerNov 30, 2010 at 18:18
-
You can also use "optgroups" to kind of achieve a similar concept, see stackoverflow.com/questions/899148/html-select-option-separator– rogerdpackOct 12, 2016 at 15:49
11 Answers
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>
-
1The disabled seperator - Nice touch! But this might create issues when doing any operations using
selectedIndex
. Nov 27, 2013 at 17:28 -
@VarunNatraaj: Yes, I've never found the need to use
selectedIndex
myself - but you would need to take account of elements with.disabled
during any counts, calculations, movements of that index.– OrblingNov 28, 2013 at 18:38 -
Seems even the firefox example doesn't work in firefox these days :) Oct 12, 2016 at 15:45
-
The use of
optgroup
would allow you to avoid the issue with selectedIndex, as well as automatically being disabled. Dec 1, 2017 at 18:36 -
@Chris-Jr Note the year,
optgroup
support wasn't as universal as it is now.– OrblingDec 11, 2017 at 11:56
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
────
-
Great! Your variant of separator character is looking awesome in IE! Also i suggest to use optgroup label instead of option because you will be able change color of optgroup label, but not in disabled option (IE).– AlekoNov 17, 2014 at 16:41
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.
-
When I was testing my answer, I tried the
<optgroup>
to see what it looked like these days, having written it off a few times in the past and it is still totally inconsistent; very annoying otherwise it would be a useful feature.– OrblingNov 30, 2010 at 18:33 -
seperator role is a good one, glad to know there are alternatives! Dec 31, 2018 at 12:19
You could use the em dash "—". It has no visible spaces between each character.
In HTML:
<option value disabled>—————————————</option>
Or in XHTML:
<option value="" disabled="disabled">—————————————</option>
-
I'm not sure if it was due to other css on the page, but I found that there are visible spaces between em dash in drop downs on Firefox and Chrome on OS X. jsfiddle.net/PhZPh Apr 5, 2013 at 15:25
-
7
-
You can also use its html escape char — (though copy and paste of that char seems to work as well) Oct 12, 2016 at 15:37
In the HTML Standard an <hr>
is now allowed in the <select>
element.
It seems Safari 17 will be the first to implement it.
<select>
<option>option 1</option>
<option>option 2</option>
<hr>
<option>option 3</option>
<option>option 4</option>
</select>
Note
Your browser will currently not display it correctly. Some browsers however support an <hr>
that is added via script:
const selectEl = document.querySelector('select');
selectEl.insertBefore(document.createElement('HR'), selectEl.childNodes[4]);
<select>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>
Both Safari and Chrome on MacOs render it correctly with the last snippet. Firefox however does not. (July 2023)
<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>
-
+1 for using a background image. Good idea. But does it work? :) Oct 27, 2011 at 22:48
-
2I just tried adding a style attribute with both background colour and image, neither seem to work in Safari 7 sadly. Nov 13, 2013 at 12:24
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
-
1It does, I'm using it. Maybe you should bring some arguments along the way. Jun 22, 2017 at 7:17
-
1Please read developer.apple.com/documentation/appkit/nsmenu?language=objc and try it for yourself in Safari 10.1 Jun 22, 2017 at 14:03
-
Doesn't work in Chrome 66, Edge, Opera, anything mobile. I've only ever seen this work in Firefox. But I applaud your arrogance. Bravo. May 11, 2018 at 6:34
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>––––</option>
</c:if>
<c:if test="${entry.key lt 50000}">
<option value=${entry.key}>${entry.value}</option>
</c:if>
I know this question is very old, but Safari 17+ and Chrome 119+ now accept <hr>
inside a <select>
tag:
<select name="my-option">
<option value="">Select an option</option>
<hr>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<hr>
<option value="option-3">Option 3</option>
</select>
Read more here:
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"> Products </h2>