CSS輸入搜索框是一個很常見的UI組件，可以讓用戶輸入關鍵詞進行搜索。我們可以通過一些CSS技巧來制作這個組件。

<form class="search-form">
<input type="text" class="search-field" placeholder="Search..."/>
<button type="submit" class="search-button"><i class="fa fa-search"></i></button>
</form>

首先，我們需要一個表單元素，用于包含輸入框和提交按鈕。通過設置該元素的class屬性，我們可以輕松地應用樣式。然后，我們需要一個輸入框元素，用于用戶輸入搜索關鍵詞。可以使用HTML5的placeholder屬性提供輸入框中的提示文本。最后，我們需要一個提交按鈕，用于提交搜索請求。提交按鈕可以使用圖標或文字。

.search-form {
display: inline-block;
position: relative;
}
.search-field {
padding: 10px;
width: 200px;
border: none;
background-color: #f5f5f5;
border-radius: 20px;
}
.search-button {
position: absolute;
top: 4px;
right: 8px;
background-color: #f5f5f5;
border: none;
border-radius: 50%;
height: 30px;
width: 30px;
}
.fa-search {
color: #666;
font-size: 18px;
}

現在，我們可以使用CSS樣式來美化搜索框。我們需要設置表單元素的display屬性為inline-block，以便可以在頁面中的任何位置使用搜索框。我們還需要設置輸入框的寬度，內邊距，邊框和圓角屬性。提交按鈕需要設置為絕對定位，以便位置正確，使用border-radius屬性定義圓形形狀。最后，我們使用字體圖標制作提交按鈕（這里使用的是FontAwesome的搜索圖標），并對文本顏色和大小進行樣式定義。

到此，我們成功地創建了一個CSS輸入搜索框，可以美觀地顯示在網站上，讓用戶方便地進行搜索。