display none on HTML option element not working on smartphone browsers.
Just use the
option element is used to create a select box with
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
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.
<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
The following video may be helpful.
What should we do?
I feel that it is best to simply give the
disabled attribute to the