html、css做一个带搜索图标的搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将提交按钮做成图片</title>
<style>
.box{
width:220px;
height: 57.5px;
background-color: #FFF5EE;
position: relative;
margin:50px auto auto 50px;
border:solid silver 0.5px;
border-radius: 10px 10px 10px 10px ;
}
#text{
width:170px;
height: 52.5px;
font-size: 19px;
border-radius: 10px 10px 10px 10px ;
background-color: #FFF5EE;
border:solid silver 0.5px;
position: absolute;
left:0px;
top:0px;
}
#search{
width: 58px;
height:58px;
font-size: 19px;
border-radius: 10px 10px 10px 10px ;
position: absolute;
right: 0px;
top: 0px;
}
</style>
</head>
<body>
<!-- 将按提交按钮 和文本框放在一个同盒子里 通过定位是调整它们的位置 -->
<div class ="box">
<input type="text" placeholder="请输入搜索内容" id="text">
<input type="image" src="images/" id="search">
</div>
<a rel="license" href="/licenses/by/4.0/"><img alt="知识共享许可协议" style="border-width:0" src="/l/by/4.0/" /></a><br />本作品采用<a rel="license" href="/licenses/by/4.0/">知识共享署名
</body>
</html>