CSS搜索框和搜索怎么寫

在CSS中，搜索框和搜索功能可以通過HTML和JavaScript來實現(xiàn)，下面是一個簡單的示例，展示如何創(chuàng)建一個基本的搜索框和搜索功能。

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

<div class="search-container">
  <input type="text" id="search-input" placeholder="請輸入搜索內(nèi)容">
  <button id="search-button">搜索</button>
</div>

CSS樣式：

.search-container {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
#search-input {
  padding: 5px;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
#search-button {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-left: 10px;
}

JavaScript功能：

document.getElementById('search-button').addEventListener('click', function() {
  var searchInput = document.getElementById('search-input').value;
  // 這里可以執(zhí)行搜索邏輯，比如發(fā)送AJAX請求到服務(wù)器進行搜索
  console.log('搜索內(nèi)容:', searchInput);
});

在這個示例中，我們創(chuàng)建了一個包含輸入框和按鈕的搜索框，通過CSS，我們?yōu)樗阉骺蚝桶粹o添加了基本的樣式，我們使用JavaScript為按鈕添加了一個點擊事件監(jiān)聽器，該監(jiān)聽器會在用戶點擊按鈕時執(zhí)行搜索邏輯，在這個示例中，搜索邏輯只是打印出用戶在輸入框中輸入的內(nèi)容，在實際應(yīng)用中，您可能需要將搜索邏輯替換為發(fā)送AJAX請求到服務(wù)器進行搜索。