实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
width:500px;
}
input[type=text]{
border:1px solid #afafaf;
padding:20px 20px 20px 68px;
border-width:2px;
width:170px;
box-sizing:border-box;
-webkit-transition:0.5s; /*chrome 浏览器平滑过渡*/
transition: 0.5s ease-in-out; /*平滑过渡0.5秒*/
outline:none; /*删除外部轮廓*/
background-color:white;
background-image:url("img/search.jpeg"); /* 加入图像*/
background-position:10px 10px; /* 图像边距*/
background-repeat:no-repeat; /*平铺方式，不扩展*/
font-size:20px;
}
input:focus{
border:2px solid green;
width:100%;
}
</style>
</head>
<body>
<div>
<p>带图标的输入框：</p>
<form accept="" name="search" target="get">
<input id="search" name="search" type="text" placeholder="seach.."></input>
</form>
</div>
</body>
</html>运行效果：
评论