Wie kann ich Optionen in HTML5-Auswahlmenüs zuverlässig ausblenden?

Optionen in HTML5-Auswahlmenüs mit CSS ausblenden

Trotz der Möglichkeit, Elemente in Firefox mit display: none; CSS stellt Chrome eine Herausforderung dar, da beim Klicken auf die Schaltfläche versteckte Optionen angezeigt werden. Speisekarte. Dies wirft die Frage auf, wie man Optionen, die den Suchkriterien entsprechen, effektiv ausblenden und gleichzeitig verhindern kann, dass sie beim Öffnen des Menüs erneut angezeigt werden.

Lösung: Verwendung des versteckten Attributs

Für HTML5-kompatible Browser das versteckte Das Attribut bietet eine effektive Lösung. Dieses Attribut verbirgt die Option sowohl vor der Ansicht als auch vor der Auswahl und stellt sicher, dass sie unabhängig von der Menüinteraktion unsichtbar bleibt.

<option hidden>Hidden Option</option>

Es ist wichtig zu beachten, dass das ausgeblendete Attribut in IE-Versionen unter 11 nicht unterstützt wird. Allerdings Wenn Ihr Hauptanliegen darin besteht, eine kleine Anzahl von Optionen zu verbergen, bietet die Kombination der ausgeblendeten und deaktivierten Attribute eine pragmatische Lösung im Vergleich zu komplexeren Techniken, bei denen Elemente hinzugefügt oder entfernt werden oder die Semantik verletzt wird Konventionen.

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

Das obige ist der detaillierte Inhalt vonWie kann ich Optionen in HTML5-Auswahlmenüs zuverlässig ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!