登陆界面输入框内加入小图标的样式


 <input type="text" class="inputAttr1" name="activityUserValue" for="reservation" placeholder="注册邮箱/用户名"/>
.inputAttr1{
    background: url("../images/user_icon.png")no-repeat 315px ;
    width: 350px;
    height: 40px;
    border-radius:5px;
    border: 1px solid #999999;
    box-shadow: 1px 1px 3px #cccccc;
    padding-left: 10px;
    margin-right: 10px;
}
这样也好简单的。。。

 

-----------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.text{border:solid 2px #ccc;width:400px;height:40px;background:url(http://d.lanrentuku.com/down/png/1211/blueberry/user_friend.png) no-repeat 0 center;}
.text input{float:left;border:none;background:none;height:40px;line-height:30px;width:100%; text-indent:32px;}
 
</style>
</head>
 
<body>
<div class="text">
    <input type="text"/>
</div>
</body>
</html>

posted on 2017-05-05 16:48  带刀侍卫++i  阅读(662)  评论(0)    收藏  举报

导航