仅通过HTML和CSS能否实现<form>中<select>列表hover时自动展开？

首先明确：原生<select>元素无法通过纯CSS实现鼠标悬停自动展开。

原因很直接——浏览器对原生<select>的下拉面板（选项列表）有严格的默认控制逻辑，CSS没法直接触发它的展开行为。你之前用在按钮下拉菜单上的技巧（通过:hover控制子元素display属性）能生效，是因为那是用普通<div>、<a>自定义的组件，完全受CSS支配；但原生<select>是浏览器内置的表单控件，很多核心行为和样式都不受CSS干预。

替代方案：自定义模拟<select>的下拉组件 #

如果一定要实现悬停展开的效果，可以用HTML+CSS自定义一个模拟<select>功能的组件，同时保证它能正常参与表单提交。下面是适配你需求的实现示例：

CSS代码

/* 自定义下拉容器，模拟原生select外观 */
.custom-select {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 2px 8px;
  background-color: #fff;
}

/* 隐藏原生select，仅用于表单提交数据 */
.custom-select > select {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* 自定义下拉选项列表 */
.custom-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 单个选项样式 */
.custom-options li {
  padding: 2px 8px;
}

/* 选项悬停高亮 */
.custom-options li:hover {
  background-color: rgb(200,235,255);
}

/* 鼠标悬停时展开选项列表 */
.custom-select:hover .custom-options {
  display: block;
}

HTML代码

<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 
  
  <!-- 自定义下拉组件 -->
  <div class="custom-select">
    <!-- 隐藏的原生select，负责表单提交 -->
    <select name="field" id="field">
      <option value="Field1">Field1</option>
      <option value="Field2">Field2</option>
      <option value="Field3">Field3</option>
    </select>
    <!-- 自定义选项列表 -->
    <ul class="custom-options">
      <li data-value="Field1">Field1</li>
      <li data-value="Field2">Field2</li>
      <li data-value="Field3">Field3</li>
    </ul>
  </div>
</form>

补充说明 #

• 这个方案里，隐藏的原生<select>负责实际的表单数据提交，自定义选项列表仅用于展示和接收用户交互；
• 如果需要完美同步选项选中状态，需要补充少量JavaScript（比如点击自定义选项时修改隐藏<select>的选中值）；纯CSS版本能满足基础的悬停展开+提交需求，但用户体验会略有不足；
• 原生<select>的键盘导航等默认功能在自定义组件中会丢失，若需要完整的表单控件体验，建议结合少量JS实现。

内容的提问来源于stack exchange，提问作者Witness Protection ID 44583292