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 サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：HTMLの「」と「背景」を効果的に使うには？ 次の記事：ブートストラップ ナビゲーションバーの折りたたみブレークポイントを変更するにはどうすればよいですか?

このウェブサイトの声明

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

著者別の最新記事

• ORA-00942 を修正する方法: テーブルまたはビューが存在しません?
  2025-01-03 15:14:39
• .NET 3.5 WinForms でコントロールを透明にするにはどうすればよいですか?
  2025-01-03 15:13:39
• 強化された画像編集のために .NET で透明なコントロールを作成するにはどうすればよいですか?
  2025-01-03 15:12:40
• Path Of Exile 2: The Mysterious Shade クエスト ウォークスルー
  2025-01-03 15:10:40
• 誰でも使える決定版 CSS ガイドで CSS をマスターする |パート2
  2025-01-03 15:09:41
• UNNEST() を使用して PostgreSQL でテーブルを転置するにはどうすればよいですか?
  2025-01-03 15:08:39
• `time()` が短いタスクの前後で同じ値を返す場合があるのはなぜですか?
  2025-01-03 15:07:40
• C# を使用して標準テキストボックスにプレースホルダー テキストを作成するにはどうすればよいですか?
  2025-01-03 15:06:44
• `[Serializable]` 属性は .NET でオブジェクトのシリアル化をどのように有効にしますか?
  2025-01-03 15:05:40
• Parallel.ForEach と Foreach: いつどちらを使用する必要がありますか?
  2025-01-03 15:04:40

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

3

2378

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

11

2505

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

2129

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

2001

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

2077

関連トピック

詳細>

• httpstatus500エラーの解決策
• win10のアクティベーションが失敗するのはなぜですか?
• Dimensity 6020 は Snapdragon とどれくらい同等ですか?
• WebページでPHPを開く方法
• Win7システムで休止状態を設定する方法
• HTMLでデータを取得する方法
• システム脆弱性の種類
• gpedit.msc を開けない場合はどうすればよいですか?

人気のおすすめ

• 表示楕円を超えるようにCSSを設定する方法
• CSSでフォントサイズを設定する方法
• CSSでホバーを使う方法
• CSSで文字間隔を設定する方法
• css3の新機能とは何ですか？

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1426355
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4274355
• 
  JAVA 初心者向けビデオチュートリアル

  2565606
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  509141
• 
  PHP ゼロベースの入門チュートリアル

  865284

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1426355 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2565606 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  509141 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  216141 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  896886 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  8013 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  6375 回の学習
• 
  Go言語実践GraphQL

  5273 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  724 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  26640 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

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

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

© php.cn All rights reserved