God is good God is good - 5 months ago 6
CSS Question

How can I hide default <select> <option> when the drop-down is clicked?

I want to have a

<select>
element that's default chosen option is "____". In other word's, blank.

When the drop-down is focused, I want the "____" option to not be in the options that can be selected. That way the user has to choose something other than "____" as their option.

Does that make sense?

Illustrations



Before clicked on:



enter image description here

While focused on:



enter image description here

As you can see, the option "___" is not in the list when it is being selected. That is my desired end result.

I've tried using onFocus events to remove options, but that just unfocuses the element, and replaces the default option with another one.

Thanks for your help!

Answer

To hide the default option, allowing the others to show, there are a few ways to go.

Unfortunately, you can't hide option elements in all browsers. Again, display:none; does not work in all browsers on options ...

In the past when I have needed to do this, I have set their disabled attribute, like so...

$('option').prop('disabled', true);

I've then used the hiding where it is supported in browsers using this piece of CSS...

select option[disabled] {
    display: none;
}