Rendering a hierarchy of “OPTION”s in a “SELECT” tag

by

The rendering of SELECT elements is largely up to the browser, you have very little influence over their presentation. Some browsers obviously allow you more customization than others, IE happens to allow very little (gasp, who’d have thunk ;)). If you need very custom SELECT elements, you’ll need to employ JavaScript or re-create something that behaves like a SELECT but is made of a bunch of DIVs and checkboxes or something to that extend.

Having said that, I think what you’re looking for are OPTGROUPs:

<select>
  <optgroup label="xxx">
    <option value="xxxx">xxxx</option>
    ....
  </optgroup>
  <optgroup label="yyy">
    ...
  </optgroup>
</select>

Every browser will display them differently, but they’ll be displayed in a distinctive fashion in one way or another. Note though that officially in HTML4 you can’t nest OPTGROUPs.

More Related Contents:

  1. How do I make a placeholder for a ‘select’ box?
  2. Change select box option background color
  3. How to remove the default arrow icon from a dropdown list (select element)?
  4. Select dropdown with fixed width cutting off content in IE
  5. Remove Select arrow on IE
  6. Html Select box options on Hover?
  7. Changing highlight color
  8. Set width of dropdown element in HTML select dropdown options
  9. Image in SELECT element [duplicate]
  10. How can change width of dropdown list?
  11. How to get equal width of input and select fields
  12. How to change the style of the title attribute inside an anchor tag?
  13. Word-wrap in an HTML table
  14. Last margin / padding collapsing in flexbox / grid layout
  15. Vertically center two elements within a div [duplicate]
  16. set content height 100% jquery mobile
  17. Why is a div with “display: table-cell;” not affected by margin?
  18. Why isn’t object-fit working in flexbox?
  19. Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)
  20. Best way to include CSS? Why use @import?
  21. Overflow:hidden dots at the end
  22. Use Font Awesome icon as CSS content
  23. Bootstrap 4 row fill remaining height
  24. What is the use of style=”clear:both”?
  25. Denoting a preferred place for a line break
  26. Best way to manage whitespace between inline list items
  27. Use multiple @font-face rules in CSS
  28. Changing the text selection color using CSS?
  29. How to vertically align text in input type=”text”? [duplicate]
  30. CSS Filter not working in Firefox

Leave a Comment