隱藏帶有 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 的選項仍然留下大綱，您可能需要向瀏覽器發送錯誤報告）