Thu Jan 09 2025

Safari で option 要素に display: none; が効かない時の対処法

要素を非表示にする display: none; を指定したにも関わらず、表示されてしまう時の対処法についてまとめる

対処法

よくある対処法として、span 要素で option 要素を囲み、span 要素に対して display: none; を指定する方法があります。

しかし、select 要素の子要素として span 要素を指定することは HTML の仕様に従わないため、他の方法を模索するべきだと思います。

CSS で指定する方法は諦め、動的に要素を追加したり、削除したりする方法が良いと思います。