How to Hide `` Elements in `` Menus in Chrome?

Hiding Elements in Menus with CSS

Despite the ability to conceal

elements within menus using display: none; in Firefox, Chrome poses a unique challenge. Upon clicking the menu, previously hidden elements reappear. To address this issue, we present two effective solutions:

1. Utilizing the 'hidden' Attribute

HTML5 introduces the 'hidden' attribute, which effectively hides

elements.

<option hidden>Hidden Option</option>

2. Combining 'hidden' and 'disabled' Attributes

In cases where browser support for the 'hidden' attribute is limited, you can employ a combination of the 'hidden' and 'disabled' attributes.

<option disabled hidden>Hidden Option</option>

By disabling the

elements that match the search criteria, you prevent them from displaying in the drop-down menu. However, this approach may not be ideal if you wish to maintain accessibility for these elements using keyboard navigation.

The above is the detailed content of How to Hide `` Elements in `` Menus in Chrome?. For more information, please follow other related articles on the PHP Chinese website!

source：php.cn

Previous article：How to Detect Right Click Events in JavaScript? Next article：How to Resolve CORS Error: 'Redirect has been blocked' in Vue.js with Chrome Plugins?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

• How Can JHat Help Me Identify and Resolve Memory Leaks in My Java Applications?
  2024-12-21 19:55:10
• How Does Go Handle Variable Thread-Safety Compared to Java's `synchronized` Keyword?
  2024-12-21 19:54:11
• How Can I Efficiently Remove Duplicate Objects from an Array in JavaScript?
  2024-12-21 19:53:12
• How Does JavaScript's Automatic Semicolon Insertion (ASI) Work and When Does It Occur?
  2024-12-21 19:52:13
• Why Should Developers Avoid Using `document.write` in Their Code?
  2024-12-21 19:51:10
• How to Reliably Execute Piped Commands Using Java's Runtime.exec()?
  2024-12-21 19:50:11
• Do Any Modern Architectures Still Exhibit 'Exotic' Properties Requiring Implementation-Defined Behavior in C and C Standards?
  2024-12-21 19:49:11
• Understanding Arrays in JavaScript
  2024-12-21 19:48:21
• iOS 18.2 Features: Everything New in iOS 18.2
  2024-12-21 19:46:11
• How Do Leading Underscores in Go Struct Tags Impact Memory Management and Platform Integration?
  2024-12-21 19:45:15

Latest Issues

function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...

From 2024-04-29 11:01:01

0

3

2259

How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?

From 2024-04-23 00:22:19

0

11

2394

The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.

From 2024-04-19 15:37:47

0

1

2007

There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...

From 2024-04-18 23:52:34

0

1

1893

Where is the courseware about CSS mind mapping? Courseware

From 2024-04-16 10:10:18

0

0

1959

Related Topics

More>

• CSS scroll bar style
• 7 ways to write PLC programs
• hasownproperty usage
• How to close the window opened by window.open
• What does bean refer to in java?
• How to restart regularly
• How to set up domain name redirection
• Introduction to commonly used top-level domain names

Popular Recommendations

• what does js mean
• How to convert string to array in js?
• How to refresh the page using javascript
• How to delete an item in js array
• How to use sqrt function

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

• 
  The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

  1423559
• 
  PHP introductory tutorial one: Learn PHP in one week

  4269123
• 
  JAVA Beginner's Video Tutorial

  2539652
• 
  Little Turtle's zero-based introduction to learning Python video tutorial

  507703
• 
  PHP zero-based introductory tutorial

  862975

• 
  The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

  1423559 times of learning
• 
  JAVA Beginner's Video Tutorial

  2539652 times of learning
• 
  Little Turtle's zero-based introduction to learning Python video tutorial

  507703 times of learning
• 
  Quick introduction to web front-end development

  215905 times of learning
• 
  Master PS video tutorials from scratch

  890697 times of learning

• 
  [Web front-end] Node.js quick start

  7511 times of learning
• 
  Complete collection of foreign web development full-stack courses

  5989 times of learning
• 
  Go language practical GraphQL

  4949 times of learning
• 
  550W fan master learns JavaScript from scratch step by step

  699 times of learning
• 
  Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours

  24986 times of learning

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

• [form button] jQuery enterprise message form contact code
• [Player special effects] HTML5 MP3 music box playback effects
• [Menu navigation] HTML5 cool particle animation navigation menu special effects
• [form button] jQuery visual form drag and drop editing code
• [Player special effects] VUE.JS imitation Kugou music player code
• [html5 special effects] Classic html5 pushing box game
• [Picture special effects] jQuery scrolling to add or reduce image effects
• [Photo album effects] CSS3 personal album cover hover zoom effect

• [Front-end template] Home Decor Cleaning and Repair Service Company Website Template
• [Front-end template] Fresh color personal resume guide page template
• [Front-end template] Designer Creative Job Resume Web Template
• [Front-end template] Modern engineering construction company website template
• [Front-end template] Responsive HTML5 template for educational service institutions
• [Front-end template] Online e-book store mall website template
• [Front-end template] IT technology solves Internet company website template
• [Front-end template] Purple style foreign exchange trading service website template

• [PNG material] Cute summer elements vector material (EPS PNG)
• [PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)
• [banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)
• [PNG material] Golden graduation cap vector material (EPS PNG)
• [PNG material] Black and white style mountain icon vector material (EPS PNG)
• [PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses
• [banner picture] Flat style Arbor Day banner vector material (AI+EPS)
• [PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)

• [Front-end template] Home Decor Cleaning and Repair Service Company Website Template
• [Front-end template] Fresh color personal resume guide page template
• [Front-end template] Designer Creative Job Resume Web Template
• [Front-end template] Modern engineering construction company website template
• [Front-end template] Responsive HTML5 template for educational service institutions
• [Front-end template] Online e-book store mall website template
• [Front-end template] IT technology solves Internet company website template
• [Front-end template] Purple style foreign exchange trading service website template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved