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

Question

我试图找出一种使用 HTML select 元素的方法，但禁用下拉菜单。 我仍然希望用户在关注元素时能够使用向上/向下箭头，但我不希望菜单实际出现（由于可定制性低，我计划替换它）。
我看到的大多数来源都建议使用display: none作为选项元素，但是仍然留下一个小空白栏：

这也将不允许用户使用向上/向下箭头来导航菜单。

这是否可能在仍然使用表单select元素的情况下使用纯 CSS 元素而不会丢失选项卡/箭头导航功能？ 我想使用select来实现可访问性/表单兼容性。

 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

浏览器的默认动作是聚焦输入并打开列表

您需要event.preventDefault()打开操作，然后focus()目标元素

 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

您不能使用 select 元素执行此操作。 如果您想要自定义菜单，您可以使用按钮/div 以及一些 javascript。 这是 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：如果带有 display:none 的选项仍然留下大纲，您可能需要向浏览器发送错误报告）