CSS中的下拉框是一種非常常見的界面元素，它通常用于展示一組選項供用戶選擇。然而，在某些情況下，我們可能需要在下拉框中提供一個輸入框，以便用戶可以自由地輸入任何他們想要的內(nèi)容。在這篇文章中，我們將會介紹如何創(chuàng)建一個帶有輸入框的下拉框。

<div class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose Option
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<input type="text" class="form-control" placeholder="Type to search">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>

首先，我們需要創(chuàng)建一個帶有dropdown類的div元素，用來包含我們的下拉框。然后，我們創(chuàng)建一個button元素，用來觸發(fā)下拉框的展開。我們?yōu)榘粹o添加了一個dropdown-toggle類，這樣用戶點擊按鈕后就會展現(xiàn)出我們的下拉框。

接下來，我們創(chuàng)建了一個包含輸入框和選項的div元素，并為其添加了dropdown-menu類。我們還為其添加了一個aria-labelledby屬性，這樣屏幕閱讀器可以用于給予用戶更好的輔助支持。

在下拉框中，我們首先添加了一個輸入框，這樣用戶就可以在下拉框中輸入他們自己的選項。我們還為輸入框添加了form-control類，以便自動適配Bootstrap的樣式。最后，我們添加了一些選項，用戶可以在其中選擇任何他們喜歡的選項。

最終的效果是一個帶有輸入框的下拉框，用戶可以在其中輸入自己的選項，并從列表中選擇一個選項。這個下拉框非常適合用于需要允許用戶自由輸入內(nèi)容的場景下，例如快速搜索和篩選等。