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

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

创始人

2023-11-12 02:28:19

0次

/* 搜索框样式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;
}

上一篇：符合屏蔽地区就跳转

下一篇：thinkphp异常报错改成404

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

相关内容

热门资讯