本文目錄導讀：

1. HTML結(jié)構(gòu)
2. CSS樣式
3. 進一步美化

如何制作一個CSS搜索框

在網(wǎng)頁設(shè)計中，搜索框是一個重要的元素，它可以讓用戶快速找到所需的信息，使用CSS可以制作出美觀且實用的搜索框，下面是一些關(guān)于如何使用CSS制作搜索框的建議。

HTML結(jié)構(gòu)

我們需要一個HTML結(jié)構(gòu)來放置搜索框，一個簡單的搜索框結(jié)構(gòu)可以包括一個輸入字段和一個提交按鈕。

<form action="/search" method="get">
  <input type="text" name="q" placeholder="搜索...">
  <input type="submit" value="搜索">
</form>

CSS樣式

我們可以使用CSS來美化搜索框，以下是一些基本的樣式：

input[type="text"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
input[type="submit"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
}

這個樣式將搜索框的輸入字段和提交按鈕設(shè)置為相同的寬度，并添加了內(nèi)邊距和外邊距，提交按鈕還具有背景顏色和文本顏色。

進一步美化

這只是一個基本的樣式，你可以根據(jù)自己的需求進一步美化搜索框，你可以添加圓角、陰影、動畫等效果，以下是一些示例代碼：

input[type="text"] {
  border-radius: 5px; /* 添加圓角 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 添加陰影 */
}
input[type="submit"] {
  border-radius: 5px; /* 添加圓角 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 添加陰影 */
  transition: background-color 0.3s ease; /* 添加背景顏色漸變效果 */
}

這些代碼將搜索框的輸入字段和提交按鈕添加了圓角和陰影效果，并為提交按鈕添加了背景顏色漸變效果，你可以根據(jù)自己的喜好進一步調(diào)整這些樣式。