点击元素唤起隐藏<input type="color">颜色选择器的跨浏览器方案

核心问题分析 #

1. Chromium无法唤起选择器：Chromium限制了JS触发完全隐藏元素（如visibility:hidden、display:none）的click()事件，原代码的invisible类属于此类。
2. 选择器位置异常：隐藏元素脱离正常文档流，浏览器无法获取其正确位置来定位弹出的选择器。
3. 点击区域不全：原label仅包裹文字，span右侧区域不在label点击范围内，无法触发选择器。

最优解决方案（原生无JS，跨浏览器兼容） #

利用label与input的原生关联特性，无需JS即可触发选择器，同时解决所有问题：

1. 修改后的完整代码

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<style>
/* 视觉隐藏但保留元素在文档流中的位置与可交互性 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

<div class="dropdown ms-5">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu">
    <li>
      <!-- label作为下拉菜单项，覆盖整个点击区域 -->
      <label class="dropdown-item d-flex align-items-center mb-0" for="colorpicker">
        Change color
        <!-- 视觉隐藏input，保持与label的关联 -->
        <input id="colorpicker" type="color" class="visually-hidden">
      </label>
    </li>
  </ul>
</div>

2. 方案优势

• 跨浏览器兼容：label与input的原生关联行为不受Chromium的隐藏元素限制，Firefox和Chromium均可正常触发。
• 点击区域全覆盖：label作为dropdown-item，整个下拉菜单项区域都可点击触发选择器。
• 选择器位置正确：visually-hidden类仅隐藏元素视觉表现，保留其在文档流中的位置，浏览器能正确定位弹出的选择器。

备选JS方案（如需保留原有JS逻辑） #

若必须使用JS触发，需确保input不是完全隐藏，仅视觉透明：

<div class="dropdown ms-5">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu">
    <li>
      <span class="dropdown-item d-flex align-items-center" onclick="changeColor()">
        Change color
        <!-- 使用opacity:0替代invisible，保留元素位置 -->
        <input id="colorpicker" type="color" class="opacity-0 position-absolute">
      </span>
    </li>
  </ul>
</div>

<script>
function changeColor() {
  var cp = document.getElementById("colorpicker")
  cp.click()
}
</script>

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