标签:change webp ack order highlight visible == inpu cli
一、添加input框
<form class="login_form"> <input class="password inputpwd" id="oldpwd" name="oldpwd" type="password" placeholder="请输入旧密码" /> <div class="invisible" onclick="changepicture(this,‘oldpwd‘)"> <img src="~/Content/images/login/不可见.png" /> </div> <input class="password inputpwd" id="newpwd" name="newpwd" type="password" placeholder="请输入新密码" /> <div class="invisible" onclick="changepicture(this,‘newpwd‘)"> <img src="~/Content/images/login/不可见.png" /> </div> <input class="password inputpwd" id="quepwd" name="quepwd" type="password" placeholder="请确认密码" /> <div class="invisible" onclick="changepicture(this,‘quepwd‘)"> <img src="~/Content/images/login/不可见.png" /> </div> </form>
二、添加css样式
.inputpwd { outline: medium; border: none !important; border-bottom: 1px solid rgba(235,235,235,1)!important; width:100%!important; } /*1).隐藏按钮css ,图片用webpack做了压缩,做了加密*/ .invisible { margin-top: -50px; margin-left: 80% }
/*给input添加一个背景图片,no-repeat不平铺,设置padding-left的值为背景图片的宽度*/
.login_form input {
width: 80%;
padding-left: 80px;
border: #E7E7E7 1px solid;
font-size: 26px;
color: #72828f;
height: 75px;
border-radius: 10px;
margin: 0 3%;
}
.login_form .username {
background: #FFFFFF url(../../Content/weixinImage/登录/用户.png) 25px 20px no-repeat;
background-size: 30px 30px;
margin-top: 60px;
}
.login_form .password {
background: #FFFFFF url(../../Content/weixinImage/登录/密码.png) 28px 22px no-repeat;
background-size: 26px 33px;
margin-top: 30px;
}
三、js控制文本框的type
///密码显示与隐藏 function changepicture(obj, name) { var showPwd = $(‘#‘ + name + ‘‘); if (showPwd.prop(‘type‘) ==‘password‘) { showPwd.prop(‘type‘, ‘text‘); $(obj).find(‘img‘).attr("src", "@Url.Content("~/Content/images/login/可见.png")"); } else { showPwd.prop(‘type‘, ‘password‘); $(obj).find(‘img‘).attr("src", "@Url.Content("~/Content/images/login/不可见.png")"); } }
效果图如下:
标签:change webp ack order highlight visible == inpu cli
原文地址:https://www.cnblogs.com/divspan/p/10475954.html