Question

I’m coding a drop down menu with the tag. Is there a way with HTML or CSS to put the name attribute of the tag at the top of the menu? So when it’s collapsed the name is displayed.

So:

<select name="animals">
    <option>Dogs</option>
    <option>Cats</option>
</select>

Whether the menu is collapsed “animals” is in the window, or if it’s expanded the “animals” is at the top.

The <optgroup> tag isn’t quite what I’m looking for either.

Answer 1

This can’t be done without either:

1) js to retain the value of the drop down, and replace the options with “animals” onchange.

or

2) make a custom drop down.

select elements are one of those unstylable “native” controls. Not a whole lot you can do with ’em besides what they were made to do.