input框前追加图片

html实现input框前追加图片

html页面代码为：

<div id="inputname"><i class="icon-user"></i><input id="login_name"  name="email" style="padding-left: 30px;"  type="text" />
</div>
<div id="inputpass"><i class="icon-pass"></i><input id="login_pass" name="passwd" style="padding-left: 30px;"  type="password" />
</div>

css代码为：

.icon-user{position: absolute;left: 0；z-index:5;margin-top: 8px;background-image: url(../css/pblogin/zhanghao.png); /*引入图片图片*/background-repeat: no-repeat; /*设置图片不重复*/background-position: 0px 0px; /*图片显示的位置*/width: 40px; /*设置图片显示的宽*/height: 35px; /*图片显示的高*/
}
.icon-pass{position: absolute;left: 0；z-index:5;margin-top: 8px;background-image: url(../css/pblogin/mima.png); /*引入图片图片*/background-repeat: no-repeat; /*设置图片不重复*/background-position: 0px 0px; /*图片显示的位置*/width: 40px; /*设置图片显示的宽*/height: 35px; /*图片显示的高*/
}

input框前追加图片相关推荐

关于angularjs input上传图片前获取图片的Size 浅析
首先我们需要一个指令来追踪input的change.ngChage不适用input[file]. app.directive("fileread", [function () { ...
CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影
1.渐变字体主要是看:-webkit-background-clip: text; 该属性 <style>.b1{width: 500px;height: 200px;font-size ...
CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影、3/4圆
1.渐变字体主要是看:-webkit-background-clip: text; 该属性 <style>.b1{width: 500px;height: 200px;font-size ...
html输入框自定义图片,图片input框自定义样式及前端回显
前言在实际项目中,经常需要用户选择图片以便后续的上传,这时要用到Html的input,并将其type设置为file.原生的input上传图片按钮通常无法符合设计稿,我的做法是将其透明度设置为0,再把 ...
Django之头像实时展示到input框、图片验证码、简单发邮件
一.以注册功能来看头像实时展示首先先来写一个简单的页面: <div class="container-fluid"><div class="row&q ...
2022-09-09 uni-app学习笔记(六) uniapp常用API,使用uniapp常用API(uni.chooseImage等)实现聊天框的选择图片和input框发送文本信息功能
文章目录 1. uniapp的js的API由两个部分组成标准ECMAScript的jsAPI uniapp扩展的APi 2.uniapp常用的api(看官网) 3.使用uniapp常用的api完善模 ...
html input type=quot;filequot;,科技常识：关于type=quot;filequot;的input框样式修改小结...
今天小编跟大家讲解下有关关于type="file"的input框样式修改小结 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关关于type="file" ...
php 点击文本框弹出时间,点击Input框弹出日期选项
点击text文本框弹出日期选择器 body{margin:0;padding:0;font:14px Verdana, Arial, sans-serif;line-height:200%;} #co ...
easyui下拉框option写死_JavaScript_jQuery+easyui中的combobox实现下拉框特效，1.第一种写法：Input框中显示： - phpStudy...
jQuery+easyui中的combobox实现下拉框特效 1.第一种写法:Input框中显示: 2. 第二种用法,在list列表中显示: 类别 3. 第二种的另一种写法: 类别以上3种方法均可实 ...

input框前追加图片

input框前追加图片相关推荐

最新文章

热门文章