CSS を使用してメニュー内の特定の要素を非表示にするにはどうすればよいですか?

を非表示にする 内の要素CSS を使用したメニュー

質問:

特定の <オプション> を非表示にするにはどうすればよいですか?

内の要素表示を完全にサポートしていない Chrome のようなブラウザでも、メニューがクリックされたときにメニューが表示されないように CSS を使用してメニューを作成します: この目的には何も使用しません?

回答:

display: none に依存する代わりに、HTML5 の hidden 属性を利用することを検討してください。以下に例を示します:

<select>  
  <option>Option1</option>
  <option>Option2</option>
  <option hidden>Hidden Option</option>
</select>

説明:

• hidden 属性は、Chrome や Firefox などの最新のブラウザーでサポートされています。
• display: none とは異なり、hidden は要素を画面とオプション メニューの両方から非表示にします。
• このアプローチは意味的に正しく、disabled 属性と組み合わせて、非表示のオプションによる対話性をさらに制限できます。

注:

• Internet Explorer バージョン 11 未満では、hidden 属性がサポートされていません。
• の場合少数の非表示オプションを使用する場合、要素を削除して再追加したり、非標準の手法を使用したりするなど、他の方法を使用するよりも、hidden 属性を単独で追加する方が効率的である可能性があります。

以上がCSS を使用してメニュー内の特定の要素を非表示にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。