html select option separator

Question

How do you make a separator in a select tag   New Window New Tab ----------- Save Page ------------ Exit

User · Answer

If you don t want to use the optgroup element  put the dashes in an option element instead and give it the disabled attribute   It will be visible  but greyed out      lt option disabled gt ---------- lt  option gt

User · Answer

I elected to conditionally alternate color and background   Setting a sort order and with vue js  I did something like this    lt style gt       altgroup 1  background gray  color white        altgroup 2 background white  color black    lt  style gt    lt option  class          altgroup 1    country sort order  gt  25        altgroup 2    country sort order  gt  50        value     country iso short     gt         country short name     lt  option

User · Answer

This is an old thread  but since no one posted a similar response  I ll add this as it s my preferred way of separation   I find using dashes and such to be somewhat of an eyesore since it could  fall short of the width of the selection box  So  I prefer to use CSS to create my separators   a simple background coloring    x000D   x000D   lt select gt  x000D     lt option style  background-color   cccccc   disabled selected gt Select An Option lt  option gt  x000D     lt option gt First Option lt  option gt  x000D     lt option gt Second lt  option gt  x000D     lt option style  font-size  1pt  background-color   000000   disabled gt  amp nbsp  lt  option gt  x000D     lt option gt Third lt  option gt  x000D     lt option gt Fourth lt  option gt  x000D     lt option style  font-size  1pt  background-color   000000   disabled gt  amp nbsp  lt  option gt  x000D     lt option gt Fifth lt  option gt  x000D     lt option gt Sixth lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

You could use the em dash        It has no visible spaces between each character  In some fonts   In HTML    lt option value                                           disabled gt                                         lt  option gt   Or in XHTML    lt option value                                           disabled  disabled  gt                                         lt  option gt

User · Answer

I m making  Laurence Gonsalves  comment into an answer because it s the only one that works semantically and doesn t look like a hack   Try adding this to your stylesheet      optgroup   optgroup   border-top  1px solid black      Much less cheesy looking than a bunch of dashes

User · Answer

lt option  data-divider  true  disabled gt                lt  option gt    you can do this one also  it is easy and make divider select drop down list

User · Answer

The disabled option approach seems to look the best and be the best supported  I ve also included an example of using the optgroup   optgroup  this way kinda sucks     x000D   x000D   lt select gt  x000D       lt optgroup gt  x000D           lt option gt First lt  option gt  x000D       lt  optgroup gt  x000D       lt optgroup label             gt  x000D           lt option gt Second lt  option gt  x000D           lt option gt Third lt  option gt  x000D       lt  optgroup gt  x000D   lt  select gt  x000D   x000D   x000D    disabled option  a bit better     x000D   x000D   lt select gt  x000D       lt option gt First lt  option gt  x000D       lt option disabled gt           lt  option gt  x000D       lt option gt Second lt  option gt  x000D       lt option gt Third lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    And if you want to be really fancy  use the horizontal unicode box drawing character   BEST OPTION     x000D   x000D   lt select gt  x000D       lt option gt First lt  option gt  x000D       lt option disabled gt ---------- lt  option gt  x000D       lt option gt Second lt  option gt  x000D       lt option gt Third lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    http   jsfiddle net JFDgH 2

User · Answer

another way is to use a css 1x1 background image on option which only seems to work with firefox and have a  ----  fallback   lt option value    disabled  disabled  class  SelectSeparator  gt ---- lt  option gt     SelectSeparator             background-image   url data image gif base64 R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw           color black        background-repeat repeat-x        background-position 50  50         background-attachment scroll      http   jsfiddle net yNecQ 6   or to use javascript  jquery  to    -hide the select element and  -show a div which can be completely styled and  -reflect the div state onto the select for the form submit   http   tutorialzine com 2010 11 better-select-jquery-css3     see also How do I add a horizontal line in a html select control

User · Answer

we can make use of optgroup tag without options  can set the font-size 1px to minimize the height  and some pretty background for it   x000D   x000D   divider     font-size  1px    background  rgba 0  0  0  0 5       divider--danger     background  red    x000D   lt select gt     lt option value  option1  gt option 1 key data lt  option gt     lt option value  option2  gt option 2 key data lt  option gt     lt optgroup class  divider  gt  lt  optgroup gt     lt option value  option3  gt option 3 key data lt  option gt     lt option value  option4  gt option 4 key data lt  option gt   lt  select gt    lt select gt     lt option value  option1  gt option 1 key data lt  option gt     lt option value  option2  gt option 2 key data lt  option gt     lt optgroup class  divider divider--danger  gt  lt  optgroup gt     lt option value  option3  gt option 3 key data lt  option gt     lt option value  option4  gt option 4 key data lt  option gt   lt  select gt  x000D   x000D   x000D   Codepen io  https   codepen io JasneetDua pen yLOYwaV editors 1100

User · Answer

Instead of the regular hyphon I replaced it using a horizontal bar symbol from the extended character set  it won t look very nice if the user is in another country that replaces that character but works fine for me  There is a range of different chacters you could use for some great effects and there is no css involved    lt option value  -  disabled gt ---- lt  option gt

User · Answer

Define a class in CSS   option separator       margin-top 8px      border-top 1px solid  666      padding 0      Write in HTML    lt select     gt       lt option disabled class  separator  gt  lt  option gt   lt  select gt

User · Answer

Try    lt optgroup label  ----------  gt  lt  optgroup gt

User · Answer

This one is best always      lt option gt First lt  option gt   lt option disabled gt           lt  option gt   lt option gt Second lt  option gt   lt option gt Third lt  option gt

User · Answer

If it s WebKit-only  you can use  lt hr gt  to create a real separator   http   code google com p chromium issues detail id 99534

[html] html select option separator

Examples related to html