I'm attempting to create a dropdown menu with checkboxes inside the dropdown area.
Below is the code snippet I am 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>https://i.sstatic.net/FCCuC.png
I'm facing two challenges with this implementation:
When clicking on the checkbox label, the dropdown closes. How can I prevent this behavior?
Is there a way to make the dropdown width match the textbox area dynamically, without specifying a fixed width?
If possible, I'd prefer a solution using only CSS.