📚 create new article (#103)

content/21.option-display-none.md

@@ -0,0 +1,16 @@
+---
+title: "Safari で option 要素に display: none; が効かない時の対処法"
+description: "要素を非表示にする display: none; を指定したにも関わらず、表示されてしまう時の対処法についてまとめる"
+emoji: "🫣"
+createdAt: "2025-1-9"
+updatedAt: "2025-1-9"
+tags: ['HTML', 'CSS', 'Safari']
+---
+
+## 対処法
+
+よくある対処法として、span 要素で option 要素を囲み、span 要素に対して display: none; を指定する方法があります。
+
+しかし、select 要素の子要素として span 要素を指定することは HTML の仕様に従わないため、他の方法を模索するべきだと思います。
+
+CSS で指定する方法は諦め、動的に要素を追加したり、削除したりする方法が良いと思います。