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 相关文章推荐
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
Vue实现菜单切换功能
Nov 08 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
十大“创意”战术!
2020/03/04 星际争霸
php学习之数据类型之间的转换介绍
2011/06/09 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
PHP中的替代语法简介
2014/08/22 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
jquery中:input和input的区别分析
2011/07/13 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
Python找出list中最常出现元素的方法
2016/06/14 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
Python制作词云图代码实例
2019/09/09 Python
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
高中生学习生活的自我评价
2013/11/27 职场文书
运动会获奖感言
2014/02/11 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
市级三好学生评语
2014/12/29 职场文书
写给老师的保证书
2015/05/09 职场文书
2015年教务工作总结
2015/05/23 职场文书
护理培训心得体会
2016/01/22 职场文书