CSS搜索框是網(wǎng)站或應(yīng)用程序中常見的元素之一。它允許用戶通過輸入關(guān)鍵詞來查找所需的信息。

下面我們來看一下如何創(chuàng)建一個簡單的搜索框：

<div class="search-container">
<input type="text" placeholder="搜索...">
<button type="submit">搜索</button>
</div>

我們在一個<div>容器中放置了一個文本輸入框和一個提交按鈕。請注意，我們在輸入框中使用了一個占位符文本，這將為用戶提供輸入指導(dǎo)和提示。

現(xiàn)在讓我們使用CSS樣式來美化這個搜索框：

.search-container {
margin-top: 20px;
display: flex;
width: 60%;
max-width: 500px;
border-radius: 25px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.search-container input[type="text"] {
flex: 1;
border: none;
padding: 15px;
font-size: 1.1rem;
}
.search-container button[type="submit"] {
background-color: #ff4500;
color: white;
border: none;
padding: 15px 25px;
font-size: 1.1rem;
cursor: pointer;
}

首先，我們?yōu)槿萜髟O(shè)置了一些基本樣式，例如寬度、邊框半徑和陰影。然后我們設(shè)置了輸入框和按鈕的樣式。我們使用彈性盒子來使它們適合容器的寬度。最后，我們?yōu)樘峤话粹o添加了背景顏色、前景色和指針氣味。

到此為止，我們已經(jīng)成功地創(chuàng)建了一個美麗的CSS搜索框。可以根據(jù)需要對樣式進(jìn)行調(diào)整。嘗試不同的背景顏色、字體和邊框半徑等屬性，以創(chuàng)建一個適合您特定應(yīng)用程序的搜索框。