脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → input添加小图标

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

 更新时间：2017年11月11日 13:28:21   作者：QunBinCheng  
大家在做网站的时候，经常需要在input里面添加小图标功能，看似功能很简单，但是实现起来还是有点技巧的，下面小编给大家介绍下JS Input里添加小图标的两种方法，需要的朋友参考下吧

我们在做网页的时候，经常需要在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里添加小图标的两种方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

相关文章

  • js实现tab切换效果

    js实现tab切换效果

    本文主要分享了js封装一个tab切换效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • JS/jQ实现免费获取手机验证码倒计时效果

    JS/jQ实现免费获取手机验证码倒计时效果

    这篇文章主要介绍了JS/jQ实现免费获取手机验证码倒计时效果的相关资料,通过定义两个接口，发送验证请求和返回数据验证手机号和验证是否一致，后台根据接口去实现，需要的朋友可以参考下
    2016-06-06
  • HTML中的setCapture和releaseCapture使用介绍

    HTML中的setCapture和releaseCapture使用介绍

    setCapture函数的作用就是将后续的mouse事件都发送给这个对象，releaseCapture就是将鼠标事件还回去，由 document、window、object之类的自行来处理。这样就保证了在拖动的过程中，不会由于经过了其它的元素而受到干扰
    2012-03-03
  • 谈谈JavaScript异步函数发展历程

    谈谈JavaScript异步函数发展历程

    对大部分JavaScript开发者而言，async函数仍是新鲜事物，其发展经历了漫长的旅程。本文将梳理总结JavaScript异步函数的发展历程，并表示未来async函数将成为实现异步的主要方式。
    2015-09-09
  • 微信小程序跨页面传递data数据方法解析

    微信小程序跨页面传递data数据方法解析

    这篇文章主要介绍了微信小程序跨页面传递data数据方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • js 计算图片内点个数的示例代码

    js 计算图片内点个数的示例代码

    这篇文章主要介绍了js 计算图片内点个数的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 微信小程序组件化开发的示例介绍

    微信小程序组件化开发的示例介绍

    虽然小程序在刚推出时是不支持组件化的,但如今小程序开始支持自定义组件开发,下面这篇文章主要给大家介绍了关于微信小程序组件化开发的相关资料,需要的朋友可以参考下
    2023-03-03
  • javascript操作referer详细解析

    javascript操作referer详细解析

    本篇文章主要是对javascript操作referer进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • JavaScript中Function详解

    JavaScript中Function详解

    函数是由关键字function、函数名加一组参数及置于大括号中需要执行的一段语义定义的。今天我们就来详细讲解一下JavaScript中的Function。
    2015-02-02
  • 基于JSONP原理解析(推荐)

    基于JSONP原理解析(推荐)

    下面小编就为大家推荐一篇基于JSONP原理解析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12

最新评论