如何实现select覆盖div且不增大视觉尺寸，点击div全域唤起下拉菜单

我整理了两个实用方案帮你解决这两个需求，先从最简洁的纯CSS方案开始：

方案一：纯CSS实现（无需JS） #

这个方案通过CSS定位让<select>元素完全覆盖整个容器，这样点击容器内的任何区域（包括标题、空白处）本质上都是点击<select>，自然会唤起下拉菜单，同时视觉上完全保留你原来的布局。

修改后的代码： #

CSS：

.lone-input-container { 
  margin-top: 0.75rem; 
  margin-bottom: 0.75rem; 
  display: inline-block; 
  position: relative; 
  width: 100%; 
  border-width: 1px; 
  --border-opacity: 1; 
  border-color: #BAC9D9; 
  border-color: rgba(186, 201, 217, var(--border-opacity)); 
  border-radius: 0.5rem; 
  padding: 0.75rem; 
  padding-top: 0.5rem; 
  padding-bottom: 0.5rem; 
  padding-top: 0; 
}
.lone-input-container-title { 
  font-size: 10px; 
  --text-opacity: 1; 
  color: #788EA4; 
  color: rgba(120, 142, 164, var(--text-opacity)); 
  /* 确保标题在select上方，不会被遮挡 */
  position: relative; 
  z-index: 1; 
  display: block; 
  margin-bottom: 0.5rem;
}
.select-input { 
  font-size: 16px; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  width: 100%; 
  height: 100%; 
  background: transparent; 
  border: none; 
  cursor: pointer; 
  padding: 0 0.75rem; 
  padding-top: 1.2rem; /* 把select的文字向下推，避开标题 */
  box-sizing: border-box;
  /* 自定义下拉箭头，替代默认样式 */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23788EA4' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem 1.25rem;
}

HTML：

<div class="lone-input-container">
  <label for="province" class="lone-input-container-title">Dans quelle province habitez-vous?</label>
  <select name="province" id="province" class="select-input bg-transparent">
    <option value=""></option>
    <option value="ab">Alberta</option>
    <option value="bc">Colombie-Britannique</option>
    <option value="mb">Manitoba</option>
    <option value="nb">Nouveau-Brunswick</option>
    <option value="nl">Terre-Neuve-et-Labrador</option>
    <option value="nt">Territoires du Nord-Ouest</option>
    <option value="ns">Nouvelle-Écosse</option>
    <option value="nu">Nunavut</option>
    <option value="on">Ontario</option>
    <option value="pe">Île-du-Prince-Édouard</option>
    <option value="qc">Québec</option>
    <option value="sk">Saskatchewan</option>
    <option value="yt">Yukon</option>
  </select>
</div>

关键说明： #

1. 让Select覆盖容器：给.select-input设置position: absolute并让它的top/left/right/bottom都为0，这样它会完全铺满父容器（已设置position: relative）。
2. 保留视觉布局：
   • 给标题设置position: relative和z-index: 1，确保它在select上方不会被遮挡。
   • 通过padding-top把select的文字向下移动，避开标题区域，和你原来的布局一致。
   • 自定义了下拉箭头（因为appearance: none会去掉默认箭头），保持视觉一致性。
3. 点击区域全覆盖：因为select铺满了整个容器，所以点击任何区域都会触发select的下拉菜单，无需额外JS。

方案二：JS + CSS结合（兼容更多场景） #

如果纯CSS方案在某些旧浏览器有兼容性问题，或者你需要保留原来的DOM结构，可以用JS监听容器的点击事件，调用select的showPicker()方法（这是现代浏览器专门用来唤起下拉菜单的API，比focus()更可靠）。

修改后的代码： #

CSS（只需要微调）：

.lone-input-container { 
  margin-top: 0.75rem; 
  margin-bottom: 0.75rem; 
  display: inline-block; 
  position: relative; 
  width: 100%; 
  border-width: 1px; 
  --border-opacity: 1; 
  border-color: #BAC9D9; 
  border-color: rgba(186, 201, 217, var(--border-opacity)); 
  border-radius: 0.5rem; 
  padding: 0.75rem; 
  padding-top: 0.5rem; 
  padding-bottom: 0.5rem; 
  padding-top: 0; 
  cursor: pointer; /* 提示用户可点击 */
}
.lone-input-container-title { 
  font-size: 10px; 
  --text-opacity: 1; 
  color: #788EA4; 
  color: rgba(120, 142, 164, var(--text-opacity)); 
}
.select-input { 
  font-size: 16px; 
  width: 100%; 
}

JS：

// 获取容器和select元素
const container = document.querySelector('.lone-input-container');
const select = container.querySelector('.select-input');

// 监听容器点击事件
container.addEventListener('click', (e) => {
  // 避免点击select本身时重复触发
  if (e.target !== select) {
    // 调用showPicker()唤起下拉菜单
    select.showPicker();
  }
});

// 如果你需要兼容不支持showPicker()的旧浏览器，可以用下面的替代方案：
// container.addEventListener('click', (e) => {
//   if (e.target !== select) {
//     const event = new MouseEvent('mousedown', { bubbles: true });
//     select.dispatchEvent(event);
//   }
// });

关键说明： #

1. 可靠唤起下拉：showPicker()是HTMLSelectElement的标准方法，专门用来显示下拉菜单，比focus()更可靠（focus()在很多浏览器不会自动弹出下拉）。
2. 避免重复触发：判断点击目标不是select本身时才触发，防止点击select时重复调用。
3. 视觉不变：无需修改select的布局，保持你原来的视觉样式，同时点击容器任意区域都能唤起下拉。

内容的提问来源于stack exchange，提问作者NicolasSC