CSS寫搜索文本框代碼怎么寫

在CSS中，我們可以使用各種樣式來定制搜索文本框的外觀，以下是一些基本的CSS代碼示例，用于創(chuàng)建一個簡單的搜索文本框：

1、HTML結(jié)構(gòu)：

<div class="search-box">
  <input type="text" class="search-input" placeholder="請輸入搜索關(guān)鍵詞">
  <button class="search-button">搜索</button>
</div>

2、CSS樣式：

.search-box {
  width: 300px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}
.search-input {
  width: 200px;
  height: 30px;
  border: none;
  border-radius: 5px;
  padding: 5px;
  font-size: 16px;
}
.search-button {
  width: 100px;
  height: 30px;
  border: none;
  border-radius: 5px;
  padding: 5px;
  font-size: 16px;
  background-color: #4CAF50; /* 綠色背景 */
  color: white; /* 白色文字 */
}

在這個示例中，我們創(chuàng)建了一個包含搜索框和搜索按鈕的div容器，搜索框使用了一個input元素，并設(shè)置了寬度、高度、邊框、邊框半徑和填充樣式，搜索按鈕則使用了一個button元素，同樣設(shè)置了寬度、高度、邊框、邊框半徑和填充樣式，并添加了背景顏色和文字顏色。

你可以根據(jù)自己的需求調(diào)整這些樣式，例如改變搜索框的寬度、高度、邊框顏色等，你也可以添加一些交互效果，如搜索框的自動完成功能、搜索按鈕的點(diǎn)擊事件等。