Chrome で CSS を使用してメニュー内の要素を非表示にできないのはなぜですか?

を非表示にする方法 内の要素を選択的に選択CSS を使用したメニュー: 難問

質問:

いくつかの不可解な理由により、Chrome が

を隠すことを頑なに拒否していることに気づきました。 内の要素メニューに対して、Firefox にはそのような懸念はないようです。私には特定の を隠すという使命があります。特定の検索パラメータを満たす要素。ただし、Chrome デバッグ ツールは、JavaScript がこれらの要素の表示スタイルを none に設定していることを正確に示していますが、不思議なことに、 ボタンを押すと要素が再び表示されます。メニューがアクティブになります。これは何の魔術ですか？これらの が表示されないようにするにはどうすればよいですか?

答え:

を効果的に隠すには検索条件に一致し、メニューのアクティブ化時にその要素が再表示されないようにするには、HTML5 でサポートされている「hidden」属性の使用を検討してください。

<option hidden>Hidden option</option>

この属性は、特定のオプションの表示を抑制する信頼性の高い手段を提供します。 。 Internet Explorer 11 より前のバージョンでは、この属性がサポートされていないことに注意することが重要です。限られた数の

のみを非表示にすることが要件の場合は、要素を削除して再挿入したり、意味的に曖昧なアプローチに頼ったりするのではなく、「disabled」属性と組み合わせて「hidden」属性を戦略的に利用することが有利な場合があります。

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

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

JavaScript html5 firefox css chrome if for while select using Attribute number this display

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTMLの「」と「背景」を効果的に使うには？次の記事：HTMLの「」と「背景」を効果的に使うには？

関連記事

続きを見る

• CSSを書くときにBorderについて注意すべきことまとめ
• 複数のスタイル選択とスタイルのリアルタイム切り替えを実現する方法_体験交流
• マーキーの詳細な使用状況分析
• CSSタイトル行の実装（行削除効果による行削除）
• CSS3 におけるグレースフル デグラデーションとプログレッシブ エンハンスメントの違い

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved