CSS炫酷搜索框

在網站中，搜索框是最常用的元素之一。除了實現搜索功能外，它還可以作為網站整體設計的一部分，從而提高用戶體驗。在本文中，我們將介紹如何使用CSS創建炫酷的搜索框。

首先，在HTML中創建一個搜索框。我們可以使用HTML<input>元素。

<input type="text" placeholder="Search">

接下來，為搜索框創建CSS樣式。我們可以使用偽元素和CSS動畫來實現炫酷的效果。

input[type="text"] {
border: 2px solid #ccc;
border-radius: 20px;
font-size: 16px;
padding: 10px 20px;
transition: all 0.5s ease;
outline: none;
}
input[type="text"]:focus {
border-color: #ff5722;
box-shadow: 0 0 10px #ff5722;
}
input[type="text"]:focus::placeholder {
opacity: 0;
}
input[type="text"]::placeholder {
color: #ccc;
transition: all 0.5s ease;
}
input[type="submit"] {
background-color: #ff5722;
border: none;
border-radius: 20px;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 10px 20px;
transition: all 0.5s ease;
}
input[type="submit"]:hover {
background-color: #fff;
color: #ff5722;
}

這個CSS樣式可以為搜索框添加以下效果：

• 圓角邊框
• 光標聚焦時修改邊框顏色和添加陰影
• 光標聚焦時隱藏占位符文字
• 占位符文字逐漸變暗
• 提交按鈕的背景色和文字顏色隨鼠標移動而改變

現在，將HTML和CSS結合起來，就可以創建一個炫酷的搜索框了。

<form>
<input type="text" placeholder="Search">
<input type="submit" value="Search">
</form>

我們可以將這個搜索框用于任何類型的網站，并根據具體需要進行修改和調整。這樣，我們就可以為用戶提供一個更友好和美觀的搜索體驗。