HTML5搜索框样式代码，你可以根据自己的需求进行选择和修改

/* 搜索框样式1 */
input[type="search"] {
border: 2px solid #ccc;
border-radius: 10px;
padding: 5px 20px;
font-size: 16px;
transition: all .25s ease-in-out;
}
input[type="search"]:focus {
border-color: #007bff;
outline: none;
}
/* 搜索框样式2 */
input[type="search"] {
background-color: #f0f0f0;
border: none;
border-radius: 30px;
padding: 10px 20px;
font-size: 16px;
}
input[type="search"]:focus {
background-color: #ddd;
outline: none;
}
/* 搜索框样式3 */
input[type="search"] {
border: none;
border-bottom: 2px solid #ccc;
padding: 5px;
font-size: 16px;
}
input[type="search"]:focus {
border-color: #007bff;
outline: none;
}
/* 搜索框样式4 */
input[type="search"] {
border: none;
border-bottom: 2px solid #007bff;
padding: 5px;
font-size: 16px;
background-image: url(search.png);
background-repeat: no-repeat;
background-position: right center;
}
input[type="search"]:focus {
border-color: #007bff;
outline: none;
}
/* 搜索框样式5 */
input[type="search"] {
border: 2px solid #ccc;
border-radius: 10px;
padding: 5px 20px 5px 30px;
font-size: 16px;
background-image: url(search.png);
background-repeat: no-repeat;
background-position: 10px center;
}
input[type="search"]:focus {
border-color: #007bff;
outline: none;
}