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 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 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
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
js不是基础的基础
2006/12/24 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
flask中的wtforms使用方法
2018/07/21 Python
Python实现网站表单提交和模板
2019/01/15 Python
Django 大文件下载实现过程解析
2019/08/01 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
演讲比赛主持词
2015/06/29 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS