<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.searchcon {
width: 500px;
height: 50px;
margin: 100px auto;
}
.parent {
width: 100%;
height: 42px;
top: 4px;
position: relative;
}
.parent>input:first-of-type {
/*输入框高度设置为40px, border占据2px,总高度为42px*/
width: 380px;
height: 40px;
border: 1px solid #ccc;
font-size: 16px;
outline: none;
}
.parent>input:first-of-type:focus {
border: 1px solid #317ef3;
padding-left: 10px;
}
.parent>input:last-of-type {
/*button按钮border并不占据外围大小,设置高度42px*/
width: 100px;
height: 44px;
position: absolute;
background: #317ef3;
border: 1px solid #317ef3;
color: #fff;
font-size: 16px;
outline: none;
}
</style>
<body>
<div class="searchcon">
<form action="" class="parent">
<input type="text">
<input type="button" value="搜索">
</form>
</div>
</body>
</html>
html+css 仿百度 搜索框
最新推荐文章于 2022-09-23 10:13:06 发布