display none on HTML option element not working on smartphone browsers.

Conclusion.

Just use the disabled attribute.

Behavioral Details

The option element is used to create a select box with select element.

For example, suppose an e-commerce site with a form that allows users to select the type of T-shirt.

And the T-shirt is available in "S," "M," and "L" sizes, but only "L" is available for the "red" color. ( In general, this kind of feature is provided by the EC system by default.)

In such a case, suppose you apply display: none; in CSS to the S' andM' option elements as follows.

<select >
 <option value="S" style="display: none;">S</option>
 <option value="M" style="display: none;">M</option>
 <option value="L">L</option>
</select>

The item will then disappear in major PC browsers, but will not disappear in smartphone browsers, and will still be displayed.

I saw some articles about this behavior happening in Safari on iOS, but in my environment, the display: none; element was also displayed in Chrome on iOS.

Note that elements with display: none; will disappear in the desktop browser's smartphone emulator, so you'll miss this behavior unless you check it on the actual device.

Even desktop browsers need attention!

I noticed when I was testing this while writing this article that, for example, if display: none; is applied to the very first option element, as shown above, the option is visible when the page loads, and disappears when the select box is selected.

In other words, it seems that display: none; is applied after touching the select box.

Please see this video.

How do I make it disappear?

On both PCs and smartphones, if you enclose an option element with another element, that option element seems to disappear.

For example, <span><option value="S">S</option></span> will make it disappear.

Here, it is important to note that even if you write the code in HTML beforehand, the browser seems to fix the code, and this <span> will not be there.

So you need to add it with JavaScript.

The following video may be helpful.

What should we do?

I feel that it is best to simply give the disabled attribute to the option element.

---