JS Input里添加小图标的两种方法


Posted in Javascript onNovember 11, 2017

我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法。

方法一

将小图标当做input的背景来插入,直接上代码吧:

<style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      input{
        border: none;
      }
      .box{
        height: 50px;
        background: yellow;
      }
      .box input{
        width: 200px;
        height: 30px;
        border-radius: 15px;
        margin: 10px 0;
        background: url(image/search.gif) no-repeat;
        background-color: white;
        background-position: 3px;
        padding-left: 30px;
        border: 1px solid black;
        outline: none;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <input type="text" class="username" value="搜索"/>
    </div>
  </body>

方法二

使用 i 标签插入

<style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      .box{
        width: 200px;
        position: relative;
      }
      .box .icon-search{
        background: url(image/search.gif) no-repeat;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 6px;
        left: 0;
      }
      .box .username{
        padding-left: 30px;
        height: 25px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <i class="icon-search"></i>
      <input type="text" class="username" value="搜索"/>
    </div>
  </body>

总结

以上所述是小编给大家介绍的JS Input里添加小图标的两种方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
javascript实现时钟动画
Dec 03 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
fetch 使用及如何接收JS传值
Nov 11 #Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 #Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 #Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 #Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 #Javascript
详解Vue如何支持JSX语法
Nov 10 #Javascript
微信小程序异步处理详解
Nov 10 #Javascript
You might like
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
php中常用的预定义变量小结
2012/05/09 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
php缓冲输出实例分析
2015/01/05 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
Python使用三种方法实现PCA算法
2017/12/12 Python
python中的闭包函数
2018/02/09 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
python文件路径操作方法总结
2020/12/21 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
人力资源专员自我评价怎么写
2013/09/19 职场文书
工程监理应届生求职信
2013/11/09 职场文书
学校志愿者活动总结
2014/06/27 职场文书
计划生育目标责任书
2015/05/09 职场文书
给朋友的道歉短信
2015/05/12 职场文书