CSS中的焦点不适用于html标签答案

【问题标题】：focus-within css not working for html labelCSS中的焦点不适用于html标签
【发布时间】：2022-02-18 04:02:48
【问题描述】：

我正在尝试在下拉区域中构建一个带有复选框的下拉列表。

这是我正在使用的代码：

.search-box {
  color: black;
  width: 450px;
}

.search-box .fake-tb {
  display: flex;
  flex-wrap: nowrap;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 2px 5px;
  margin: auto;
  height: 35px;
  max-width: 700px;
}

.search-box .fake-tb * {
  border: 0 !important;
  height: auto !important;
}

.search-box .fake-tb input[type=search] {
  border-radius: 6px;
  width: 100% !important;
  outline: none;
}

.search-box .fake-tb img {
  vertical-align: middle;
  margin: auto;
  padding: 2px;
}

.search-box .dropdown {
  display: none;
  position: absolute;
  border: 1px solid #e5e5e5;
  cursor: default;
  background: white;
  z-index: 99999;
  text-align: left;
}

.search-box:focus-within .dropdown {
  display: block;
  background-color: white;
  color: black;
}

.search-box .dropdown>table {
  padding: 3px 10px 3px 2px;
  width: 100%;
}

.search-box .dropdown table tr:hover {
  background-color: lightskyblue;
}

<div>line before ...</div>
<div class="search-box">
  <div class="fake-tb">
    <input name="ctl32$txtCusSearch" id="ctl32_txtCusSearch" auto-complete="off" type="search">
    <img src="search.svg" />
  </div>
  <div class="dropdown">
    <table id="ctl32_lstOptions">
      <tbody>
        <tr>
          <td><input id="ctl32_lstOptions_0" name="ctl32$lstOptions$0" type="checkbox" value="Value1"><label for="ctl32_lstOptions_0">Checkbox 1</label></td>
        </tr>
        <tr>
          <td><input id="ctl32_lstOptions_1" name="ctl32$lstOptions$1" type="checkbox" value="Value2"><label for="ctl32_lstOptions_1">Checkbox 2</label></td>
        </tr>
        <tr>
          <td><input id="ctl32_lstOptions_2" name="ctl32$lstOptions$2" type="checkbox" value="Value3"><label for="ctl32_lstOptions_2">Checkbox 3</label></td>
        </tr>
        <tr>
          <td><input id="ctl32_lstOptions_3" name="ctl32$lstOptions$3" type="checkbox" value="Value4"><label for="ctl32_lstOptions_3">Checkbox 4</label></td>
        </tr>
        <tr>
          <td><input id="ctl32_lstOptions_4" name="ctl32$lstOptions$4" type="checkbox" value="Value5"><label for="ctl32_lstOptions_4">Checkbox 5</label></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div>line after ...</div>

我正在努力解决两个问题：

单击复选框可以正常工作，但单击其标签会关闭下拉菜单。我怎样才能让它保持打开状态？
如何在不指定固定宽度的情况下使下拉菜单的宽度等于文本框区域？

如果可能，我会更喜欢纯 CSS 解决方案。

【问题讨论】：

不使用for连接标签，而是用标签包裹复选框。
它是从asp.net checkedlistbox生成的代码。我对它没有太多控制权。
我尝试了两种将标签包装在复选框内的方法，反之亦然。没有运气。
#2 很简单：添加 .search-box { position: relative; } 和 .dropdown { width: 100%; }
解释focus-within与你的问题有什么关系？

标签： javascript html css checkbox

【解决方案1】：

:focus-within 在 div 中的元素获得焦点时激活。但是，大多数元素，包括label，都不能被关注。 input 可以，这就是为什么您的下拉菜单在选中复选框时不会消失的原因。

要解决此问题，只需将 tabindex="0" 属性添加到您的 label 元素。

【讨论】：