I'm struggling with creating a select dropdown that includes a search box inside. How can I properly position the search box within the dropdown? I've tried using position relative and absolute, but even when specifying top: 10px, the element doesn't move down.
select {
position: relative;
width: 100%;
}
.search-box > input {
position: absolute;
top: 10px;
}
input {
width: 100%;
z-index: 100;
}<form>
<select>
<option>Test</option>
<div class="search-box">
<input type="search" />
</div>
</select>
</form>