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 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
Jqprint实现页面打印
Jan 06 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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
编写PHP的安全策略
2006/10/09 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
CI框架表单验证实例详解
2016/11/21 PHP
js 调整select 位置的函数
2008/02/21 Javascript
json跟xml的对比分析
2008/06/10 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
python列表操作实例
2015/01/14 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
django 消息框架 message使用详解
2019/07/22 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
珍爱生命演讲稿
2014/05/10 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
2015年财政局工作总结
2015/05/21 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
python运行脚本文件的三种方法实例
2022/06/25 Python