input中嵌入两个图,图片css样式出错

html:
<p class="input"><i class="icon-user"></i><input type="username" id="username1" onblur="checkUser()"><i class="checkimg"></i></p>
css:
.icon-user{
position: absolute;left: 0;z-index:5;
background-image: url('<%=path %>/img/user_meitu_6.jpg'); /*引入图片图片*/
background-repeat: no-repeat;
background-position: 2px 3px;
width:25px;
height:25px;
}
#login fieldset input[type="username"], #login fieldset input[type="password"] {
background-color: #fff;
color: #777;
width: 250px;
heigth: 25px;
padding-left:30px;
}
.checkimg
{display: none;
position: absolute;left:200;z-index:6;
background-image: url('<%=path %>/img/password_meitu_4.jpg'); /*引入图片图片*/
background-repeat: no-repeat; /*设置图片不重复*/
background-position:225px 3px;/*图片显示的位置*/
width:25px;
height:25px;
}
拿username这个input来说,希望将前后两个<i>标签里的图片都显示在input的框里。现在第一个class是icon-user的<i>标签显示是正常的,但是class是checkimg的显示不正常,不知道为什么换行了,请问这个应该怎么改
...全文
相关推荐
js实现多图和单图上传显示
主要为大家详细介绍了js实现多图和单图上传显示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
简单的签到功能实现,js,html,css
简单的签到功能实现,js,html,css,适合新手去学习,
实现上传图片之前的预览功能.rar
实现上传图片之前的预览功能,直接可以使用,不需修改
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
今天小编就为大家分享一篇解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
input输入框在获得或失去焦点时隐藏或显示文字,这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧,本文使用jquery实现以下,感兴趣的朋友可以参考下哈


