CSS下拉列表條件搜索功能，常見于電商、論壇等網站，便于用戶篩選信息。下面介紹如何實現：

1. HTML部分：

<div class="search-bar">
<input type="text" placeholder="請輸入關鍵詞" />
<select>
<option value="" selected>請選擇分類</option>
<option value="1">分類1</option>
<option value="2">分類2</option>
<option value="3">分類3</option>
</select>
<button>搜索</button>
</div>

2. CSS部分：

.search-bar {
display: flex;
align-items: center;
}
input[type="text"], select {
height: 32px;
padding: 0 10px;
border: solid 1px #ccc;
border-radius: 5px;
margin-right: 10px;
}
button {
height: 32px;
padding: 0 10px;
border: none;
border-radius: 5px;
color: #fff;
background-color: #f60;
}

3. JS部分：

// 獲取節點
const searchBar = document.querySelector('.search-bar');
const input = searchBar.querySelector('input[type="text"]');
const select = searchBar.querySelector('select');
const searchBtn = searchBar.querySelector('button');
// 綁定事件
searchBtn.addEventListener('click', function() {
// 獲取輸入值和選中的值
const inputVal = input.value;
const selectVal = select.value;
// TODO：根據輸入值和選中的值發起搜索請求
});

注意：

- HTML部分可以根據實際需求進行修改。

- CSS部分樣式也可以根據需求進行修改。

- JS部分的TODO需要根據實際需求完成搜索功能。