本篇文章给大家介绍一种好看的css搜索框样式，希望对感兴趣的朋友有所帮助。
css搜索框样式代码具体示例如下：
<div class="search bar">
<form>
<input placeholder="css搜索框代码测试" name="cname" type="text">
<button type="submit"></button>
</form>
</div>style样式代码如下：
* {
box-sizing:border-box;
}
div.search {
padding:10px 0;
}
form {
position:relative;
width:300px;
margin:0 auto;
}
input,button {
border:none;
outline:none;
}
input {
width:100%;
height:42px;
padding-left:13px;
}
button {
height:42px;
width:42px;
cursor:pointer;
position:absolute;
}
.bar input {
border:2px solid #c5464a;
border-radius:5px;
background:transparent;
top:0;
right:0;
}
.bar button {
background:#c5464a;
border-radius:0 5px 5px 0;
width:60px;
top:0;
right:0;
}
.bar button:before {
content:"搜索";
font-size:13px;
color:#F9F0DA;
}以上搜索框css代码测试效果如下图：
注：
立即学习“前端免费学习笔记（深入）”；
所有主流浏览器都支持
标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交
【相关文章推荐】
以上就是css怎么做出好看的搜索框样式？（代码示例）的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
178
