HTML5的搜索框代碼實(shí)現(xiàn)起來非常簡單，可以通過修改CSS樣式來實(shí)現(xiàn)顏色的變化。

<form>
<input type="text" placeholder="請輸入搜索內(nèi)容" class="search-box">
<input type="submit" value="搜索" class="search-button">  
</form>

以上代碼是一個簡單的搜索框的HTML結(jié)構(gòu)，placeholder屬性可以設(shè)置搜索框的提示文本。

.search-box {
width: 200px;
height: 30px;
border: 1px solid #ccc;
font-size: 16px;
padding: 5px 10px;
outline: none;
}
.search-button {
width: 60px;
height: 30px;
background-color: #007bff;
color: #fff;
border: none;
outline: none;
}
.search-button:hover {
cursor: pointer;
background-color: #0056b3;
}

以上CSS代碼可以實(shí)現(xiàn)搜索框的樣式設(shè)置，包括邊框、字體、背景等。其中，邊框顏色為#ccc，按鈕背景顏色為#007bff，鼠標(biāo)懸浮時背景顏色變?yōu)?0056b3。