<optgroup label='-------'></optgroup> gives xhtml validation error

css, html, optgroup

Solution

Similar to what @ZippyV wrote, you can just use an `<option>` and make it be disabled:

<option disabled='disabled'>--</option>

That won't be selectable. Also if it were me I'd use an m-dash and not two hyphens:

<option disabled='disabled'>&mdash;</option>

Problem

``` Error: End tag for 'optgroup' which is not finished. You have probably failed to include a required child element. Hence the parent element is "not finished", not complete. ``` I want to achieve something like this in select options. ``` USA UK -- Afghanistan ``` I want to put few important countries on top and then a non-selectable divider and then ordered list of remaining countries. I put this divider using empty 'optgroup'. While it works perfectly in all browser, I get validation error. What could be other approaches to implement this?

Original source