html select option separator

html select option separator

How do you make a separator in a select tag?

New Window  New Tab  -----------  Save Page  ------------  Exit  

Answer by Tina Orooji for html select option separator

Try:

Answer by james.garriss for html select option separator

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.

----------  

Answer by user511941 for html select option separator

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.

????  

Answer by ebricca for html select option separator

another way is to use a css 1x1 background image on option which only seems to work with firefox and have a "----" fallback

----     .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 to add horizontal line in html select control

Answer by Jon for html select option separator

If it's WebKit-only, you can use

---

to create a real seperator.

http://code.google.com/p/chromium/issues/detail?id=99534

Answer by Tobi for html select option separator

You could use the em dash "?". It has no visible spaces between each character.
(In some fonts!)

In HTML:

?????????????

Or in XHTML:

?????????????

Answer by Alex Kinnee for html select option separator

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):

                First                      Second          Third        

disabled option (a bit better):

      First      _________      Second      Third  

And if you want to be really fancy, use the horizontal unicode box drawing character. It's sexy!
(BEST OPTION!)

      First      ??????????      Second      Third  

http://jsfiddle.net/JFDgH/2/

Answer by Klaus Heyne for html select option separator

Define a class in CSS:

option.separator {      margin-top:8px;      border-top:1px solid #666;      padding:0;  }  

Write in HTML:

Answer by Tejashree for html select option separator

This one is best always.

First  _________  Second  Third  

Answer by Dexter Blake for html select option separator

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.

    Select An Option    First Option    Second        Third    Fourth        Fifth    Sixth  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72