效果如图：
注意点：
1，input表单里面有一个图标，给input加一个背景图片，然后在加一个padding调整。
2，当input框获取到焦点时，输入框border显示蓝色（或其他颜色）。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> form表单 </title>
<style>
*{
padding:0px;
margin:0px;
font:14px/1.5 ‘微软雅黑‘;
border:none;
}
body{
text-align: center;
padding-top: 50px;
}
form p{
margin-bottom: 20px;
}
form p label{
margin-right: 10px;
}
form p input{
padding: 7px 7px 7px 45px;
border: 1px solid #ccc;
width: 350px;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
background:url(‘./img/rl-sprite.png‘) no-repeat 0px 0px;
}
form p input:focus{
border:1px solid #66afe9;
}
#name{
background-position: -84px -727px;
}
#email{
background-position: -84px -679px;
}
#pwd{
background-position: -84px -775px;
}
</style>
</head>
<body>
<form>
<p>
<label for=‘name‘>姓名</label>
<input type="text" id="name" placeholder="请输入姓名" />
</p>
<p>
<label for=‘email‘>邮箱</label>
<input type="text" id="email" placeholder="请输入邮箱" />
</p>
<p>
<label for=‘pwd‘>密码</label>
<input type="text" id="pwd" placeholder="请输入密码" />
</p>
</form>
</body>
</html>
时间： 2024-10-24 13:57:32