focus-within css not working for html label

user_1252228 0
Viewed 229

I'm trying to build a dropdown list with checkboxes in dropdown area.

Here is the code I'm using:

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

screenshot

There are 2 problems I'm struggling with:

  1. Clicking on checkbox works fine, but clicking on its label closes the dropdown. How can I keep it open?

  2. How do I make the width of dropdown equal to the textbox area, without specifying a fixed width?

I'll prefer a pure CSS solution if possible.

checkbox css html javascript
1 Answers

:focus-within activates when an element within your div is focused. However, most elements, including label, cannot be focused on. input can be, which is why your dropdown doesn't disappear on checking a checkbox.

To fix this simply add the tabindex="0" attribute to your label elements.

user_117898040
Related