html select option separator

by

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

<select>
    <optgroup>
        <option>First</option>
    </optgroup>
    <optgroup label="_________">
        <option>Second</option>
        <option>Third</option>
    </optgroup>
</select>

disabled option (a bit better):

<select>
    <option>First</option>
    <option disabled>_________</option>
    <option>Second</option>
    <option>Third</option>
</select>

And if you want to be really fancy, use the horizontal unicode box drawing character.

(BEST OPTION!)

<select>
    <option>First</option>
    <option disabled>──────────</option>
    <option>Second</option>
    <option>Third</option>
</select>

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

More Related Contents:

  1. How do you disable browser autocomplete on web form field / input tags?
  2. How to make a div fill a remaining horizontal space?
  3. Why doesn’t nth-of-type/nth-child work on nested elements?
  4. Force IE compatibility mode off using tags
  5. How can I style even and odd elements?
  6. base64 encoded images in email signatures
  7. Why top margin of html element is ignored after floated element?
  8. Base64 PNG data to HTML5 canvas
  9. How can I fill a div with an image while keeping it proportional?
  10. Spring Boot with AngularJS html5Mode
  11. How do I make the whole area of a list item in my navigation bar, clickable as a link?
  12. Is it considered bad practice to use absolute positioning? [closed]
  13. How to create a transparent triangle with border using CSS?
  14. How to set a stroke-width:1 on only certain sides of SVG shapes?
  15. Does the tag in HTML have an ending tag?
  16. HTML Favicon.ico won’t show on Google Chrome
  17. Base64 encoded image is not showing in gmail
  18. How can I locate the default style sheet for a browser?
  19. How to select first element via XPath?
  20. Image label for input in a form not clickable in IE11
  21. Is it possible to use the same meta tag for opengraph and schema.org
  22. Default :target with CSS
  23. How can I stop the browser from url-encoding form values on GET
  24. How to center a (background) image within a div?
  25. What is x-tmpl?
  26. How to force Iframe to run quirks under a standard parent frame
  27. Is there a minlength validation attribute in HTML?
  28. Why do my list item bullets overlap floating elements
  29. Css hover sometimes doesn’t work on svg paths
  30. Unwanted border-radius corners around images in Brave/Chrome browser

Leave a Comment