![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7904794eddd5a5ac7eb0c2fe9fff0e80.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3搜索框</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
.search,.search>input,.search>button{
height: 42px;
font-size: 20px;
}
.search {
margin: 20px auto;
width: 300px;
display: flex;
border: 3px solid #A3D0c3;
border-radius: 8px;
}
.search>input,.search>button {
outline: none;
}
.search>input {
width: 80%;
border-radius: 8px 0 0 8px;
}
.search>button {
width: 20%;
background: #A3D0c3;
}
</style>
</head>
<body>
<div class="search">
<input placeholder="输入名字"></input>
<button>搜索</button>
</div>
</body>
</html>