焦点-在css中不适用html标签。

Question

我试图在下拉区域建立一个带有复选框的下拉列表。

下面是我使用的代码：

​

.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>

​

​

​

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

1. 单击复选框可以正常工作，但单击其标签会关闭下拉列表。我怎么开着呢？

1. 如何使下拉列表的宽度等于文本框区域，而不指定固定的宽度？

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

Answer 1

当您的div中的元素聚焦时，:focus-within会激活。但是，大多数元素，包括label，都不能集中于此。input是可以的，这就是为什么您的下拉列表在选中复选框时不会消失。

要解决这个问题，只需将tabindex="0"属性添加到label元素中即可。