隐藏带有 CSS 的 select 元素的整个下拉菜单？

Question

I'm trying to figure out a way to use a HTML select element, but disable the dropdown menu. I still want the user to be able to use the up/down arrows when focused on the element, but I don't want the menu to actually appear (I plan on replacing it due to low customizability).
Most sources I see suggest using display: none for the option elements, however that still leaves behind a little blank bar:

and this also will not allow the user to use up/down arrows to navigate the menu.

Is this possible while still using the form select element, without losing tab/arrow navigation abilities, with pure CSS? I want to use select for accessibility/form compatibility.

 select { border: 0; border-radius: 20px; padding: 10px; cursor: pointer; height: 50px; max-height: 50px; } option { z-index: -2; background-color: white; border-color: white; }

 <select> <option value=1>Value 1</option> <option value=2>Value 2</option> <option value=3>Value 3</option> <option value=4>Value 4</option> <option value=5>Value 5</option> </select>

Answer 1

The browser's default action is to focus the input and open the list

You need to event.preventDefault() opening action and then focus() the target element

 function handleclick(event) { event.preventDefault() event.target.focus(); }

 select { border: 0; border-radius: 20px; padding: 10px; cursor: pointer; height: 50px; max-height: 50px; } option { z-index: -2; background-color: white; border-color: white; }

 <select onmousedown="handleclick(event)"> <option value=1>Value 1</option> <option value=2>Value 2</option> <option value=3>Value 3</option> <option value=4>Value 4</option> <option value=5>Value 5</option> </select>

Answer 2

You can't do this with a select element. If you want to have a custom menu, you can use a button/div along with some javascript. Here's a nice example from W3S:

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (.event.target.matches('.dropbtn')) { var dropdowns = document;getElementsByClassName("dropdown-content"); var i; for (i = 0. i < dropdowns;length; i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown.classList;remove('show'); } } } }

 .dropbtn { background-color: #04AA6D; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }.dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; }.dropdown { float: right; position: relative; display: inline-block; }.dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); right: 0; z-index: 1; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdown a:hover {background-color: #ddd;}.show {display: block;}

 <h2>Aligned Dropdown Content</h2> <p>Use <strong>float: right</strong> on the dropdown class to float the dropdown menu to the right, and <strong>right:0</strong> on the dropdown-content if you want the dropdown content to go from right to left.</p> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </div> </div>

(PS: You might want to send a bug report to your browser if an option with display:none still leaves an outline)