本文目錄導(dǎo)讀：

1. 基本結(jié)構(gòu)
2. CSS樣式應(yīng)用
3. 綜合應(yīng)用

如何用CSS樣式打造精美的搜索框

在網(wǎng)頁設(shè)計中，搜索框是一個重要的組成部分，它能夠幫助用戶快速找到所需內(nèi)容，而CSS樣式則可以讓搜索框更加美觀，提升用戶體驗，怎么用CSS樣式寫搜索框呢？

基本結(jié)構(gòu)

搜索框通常由輸入字段和提交按鈕組成，我們可以使用HTML的<input>元素來創(chuàng)建輸入字段，<button>元素來創(chuàng)建提交按鈕，我們可以使用CSS來美化這些元素。

CSS樣式應(yīng)用

1、美化輸入字段

我們可以使用CSS的border屬性來添加邊框，background屬性來設(shè)置背景色，color屬性來設(shè)置字體顏色等，以下代碼可以將輸入字段美化為一個帶有藍色邊框、白色背景和黑色字體的文本框：

input[type="text"] {
  border: 1px solid blue;
  background: white;
  color: black;
}

2、美化提交按鈕

提交按鈕通常是一個可以點擊的區(qū)域，我們可以使用CSS的padding屬性來設(shè)置內(nèi)邊距，border屬性來添加邊框，background屬性來設(shè)置背景色等，以下代碼可以將提交按鈕美化為一個帶有綠色背景、黑色字體和圓角邊框的按鈕：

button {
  padding: 10px 20px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background: green;
  color: black;
}

綜合應(yīng)用

我們可以將上述兩個例子綜合起來，創(chuàng)建一個完整的搜索框樣式，以下代碼可以創(chuàng)建一個帶有藍色邊框、白色背景和黑色字體輸入字段，以及綠色背景、黑色字體和圓角邊框提交按鈕的搜索框：

input[type="text"], button {
  border: 1px solid blue;
  background: white;
  color: black;
}
button {
  padding: 10px 20px;
  border-radius: 5px;
  background: green;
}

在HTML中，我們可以這樣應(yīng)用這些樣式：

<div class="search-box">
  <input type="text" placeholder="Search...">
  <button>Search</button>
</div>

通過以上代碼，我們就可以用CSS樣式來美化搜索框，提升用戶體驗。