是否可以仅使用 HTML 和 CSS 使 <form><select> 列表在悬停时下拉？

Question

我想让这个表单的 select 列表在悬停时自动下拉，就像“布局...”按钮的菜单自动下拉一样，仅使用 HTML 和 CSS。我试过将按钮的 CSS 技巧复制到选项列表，但没有成功。可以吗？

.dropdown-content {
  display: none; /* don't drop down until time to show */
  position: absolute; /* keep button in-place */
  background-color: white; /* so items aren't see-through */
  border: 1px solid; /* dropdown outline */
}

.dropdown-content a { /* links inside the dropdown */
  text-decoration: none; /* avoid underlining */
  display: block; /* put each link on a line */
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover { background-color: rgb(200,235,255); }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content { display: block }

<div class="dropdown"><button class="dropbtn">Layout...</button>
  <div class="dropdown-content">
  <a href="small.html">Small</a>
  <a href="medium.html">Medium</a>
  <a href="large.html">Large</a>
  </div>
</div>

<p>

<form action="action.dll" method="GET">
  <input class="forminput" type="submit" value="Find:"> <input type="text" name="target" value=""> in 
    <select name="field" id="field">
    <option value = "Field1">Field1</option>
    <option value = "Field2">Field2</option>
    <option value = "Field3">Field3</option>
    </select>
</form>

Answer 1

不确定 CSS，但您可以使用简单的 JavaScript 来做到这一点。

这是您的代码中的示例：

<select
      name="field"
      id="field"
      onClick="clicked()"
      onmouseenter="expand(this)"
      onmouseleave="shrink(this)"
    >
      <option value="Field1" onclick="clicked()">Field1</option>
      <option value="Field2" onclick="clicked()">Field2</option>
      <option value="Field3" onclick="clicked()">Field3</option>
    </select>

    <script>
      function expand(obj) {
        obj.size = 3;
      }
      function shrink(obj) {
        obj.size = 1;
      }
      function clicked() {
        obj = document.getElementById("field");
        obj.size = 1;
      }
    </script>