HTML和CSS搜索欄代碼 搜索欄是現代網站、應用程序和功能的重要組成部分之一。HTML和CSS可以用于創建具有各種搜索功能和樣式的搜索欄。以下是演示如何使用HTML和CSS創建搜索欄的一些代碼示例： HTML代碼： ```html

以下是一個基本的搜索欄HTML代碼：

<form>
<input type="text" placeholder="搜索">
<button type="submit">提交</button>
</form>

此代碼創建了一個包含文本框和提交按鈕的表單

CSS代碼：

以下是一些用于搜索欄樣式的CSS代碼：

/*搜索欄容器樣式*/
.search-box {
position: relative;
display: inline-block;
margin-right: 10px;
}
/*搜索框輸入樣式*/
.search-box input[type="text"] {
width: 200px;
height: 30px;
padding: 5px 10px;
border: none;
border-radius: 3px;
box-shadow: none;
outline: none;
font-size: 16px;
}
/*搜索按鈕樣式*/
.search-box button[type="submit"] {
position: absolute;
top: 0;
right: 0;
height: 40px;
width: 40px;
border: none;
background-color: #007bff;
color: #fff;
font-size: 18px;
border-radius: 3px;
cursor: pointer;
}
/*搜索按鈕hover狀態樣式*/
.search-box button[type="submit"]:hover {
background-color: #0066cc;
}

對于需要更高級功能的搜索欄，可以使用JavaScript和其他庫來制作。但是，HTML和CSS代碼可用于創建基本的搜索欄，并管理其外觀和行為。