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

赞 (0)

相关推荐

  • 如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标

    从IE 10开始,type="text" 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本. 对于type="password"的 input 则会在右方显示一个小眼睛的图标,占击这个图标可以显示已经输入的内容. 好是好,但有时候会画蛇添足,比如已经用js控制了这个功能的时候. 只要使用以下CSS代码可轻松实现隐藏IE浏览器自带的文本删除按钮和密码查看按钮. ::-ms-clear, ::-ms-reveal { disp

  • 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

  • Bootstrap3 input输入框插入glyphicon图标的方法

    Bootstrap3 input输入框插入glyphicon图标的方法

    bootstrap3如何在input输入框插入glyphicon图标呢?插入图标看起来比较醒目,满足用户体验价值观,此功能应用于各大网站. 怎么把图标放在输入框的开头?? <div class="form-group has-feedback"> <label class="col-md-2 control-label" for="username">用户名</label> <div class=&quo

  • bootstrap布局中input输入框右侧图标点击功能

    bootstrap布局中input输入框右侧图标点击功能

    使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标,如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的: 那么问题来了,怎样让这些小图标能够获得点击事件呢? 我也不知道,但是可以用一种迂回的方式,来间接的实现该功能. ***重点来了: 解决方案:在小图标的位置上,添加一个看不见的元素,元素的大小正好将小图标覆盖,但是没有背景颜色和边框:相当于给小图标盖了一个透明的被子: 复制代码 代码如下: <di

  • 在vue-cli的组件模板里使用font-awesome的两种方法

    方法一: npm install font-awesome 在main.js里添加import 'font-awesome/css/font-awesome.css' 方法二: 在官网下载代码到本地,现在应该是font-awesome-4.7,把整个文件夹放到static文件夹中,然后在index.html中加上<link rel="stylesheet" href="/static/font-awesome-4.7/css/font-awesome.min.css&q

  • c# 向MySQL添加数据的两种方法

    下面介绍两种执行SQL命令的方法,并作出相应地总结,第一种介绍一种常规用法,下面进行做简要地分析,首先我们需要执行打开数据库操作首先创建一个MySqlConnection对象,在其构造函数中传入一个连接字符串,然后执行Open操作打开数据库,在正确打开数据库之后我们才能进行相关的动作,在ExecuteSQL这个函数中, 我们执行MySqlCommand myCmd = new MySqlCommand(CmdString, conn),从而创建MySqlCommand对象,其中传入的两个参数分别

  • Js得到radiobuttonlist选中值的两种方法(推荐)

    如下所示: <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ajaxselect.OnmouseTitle.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

  • pandas 给dataframe添加列名的两种方法

    pandas 给dataframe添加列名的两种方法

    目录 方法1 方法2 DataFrame是Python中Pandas库中的一种数据结构,它类似excel,是一种二维表.DataFrame的单元格可以存放数值.字符串等,同时DataFrame可以设置列名columns与行名index. 方法1 import pandas as pd import numpy as np df1 = pd.DataFrame(np.random.randn(3, 3), index=list('abc'), columns=list('ABC')) print(

  • Python在图片中添加文字的两种方法

    Python在图片中添加文字的两种方法

    本文主要介绍的是利用Python在图片中添加文字的两种方法,下面分享处理供大家参考学习,下来要看看吧 一.使用OpenCV 在图片中添加文字看上去很简单,但是如果是利用OpenCV来做却很麻烦.OpenCV中并没有使用自定义字体文件的函数,这不仅意味着我们不能使用自己的字体,而且意味着他无法显示中文字符.这还是非常要命的事情.而且他显示出来的文字位置也不太好控制.比如下面的代码,他想做的仅仅是显示数字3: 代码: #coding=utf-8 import cv2 import numpy as

  • java 在file的尾部添加数据的两种方法总结

    java 在file的尾部添加数据的两种方法总结 问题描述:   在文件的末尾追加内容 方法1:利用RandomAccessFile类  1.将randomAccessFile模式设置为rw  2将randomAccessFile移动(seek)到文件末尾  3追加数据  4关闭流 方法2:利用FileWriter类  1.将FileWriter构造方法第二个参数置为true.表示在尾部追加  2追加数据  3.关闭流 实现代码: package cn.com; import java.io.F

  • 基于Android在布局中动态添加view的两种方法(总结)

    一.说明 添加视图文件的时候有两种方式:1.通过在xml文件定义layout:2.java代码编写 二.前言说明 1.构造xml文件 2.LayoutInflater 提到addview,首先要了解一下LayoutInflater类.这个类最主要的功能就是实现将xml表述的layout转化为View的功能.为了便于理解,我们可以将它与findViewById()作一比较,二者都是实例化某一对象,不同的是findViewById()是找xml布局文件下的具体widget控件实例化,而LayoutI

  • Java 在PDF中添加条形码的两种方法

    条形码,是由宽度不等的多个黑条和空白所组成,用以表达一组信息的图形标识符.通过给文档添加条形码,可以直观,快捷地访问和分享一些重要的信息.本文就将通过使用Java程序来演示如何在PDF文档中添加Codebar.Code128A和Code39条形码.除此之外,还可支持创建Code11.Code128B.Code32.Code39 Extended .Code93和Code93 Extended条形码. 使用工具:Free Spire.PDF for Java(免费版) Jar文件获取及导入: 方法

  • 从docker镜像里提取dockerfile的两种方法

    从docker镜像里提取dockerfile的两种方法

    目录 前言 从镜像中提取dockerfile的两种方法 1.history参数 2.dfimage 补充:如何设置永久的别名 总结 前言 hello,大家好,今天在玩docker的时候发现了很好用的东西,他就是用来提取镜像中的dockerfile的.这个是前者留下来的镜像,但是dockerfile被删除了,现在想知道dockerfile里面是如何写的,然后去查了查就有了新的发现——通过镜像来提取dockerfile,接下来我就把方法分享给大家 从镜像中提取dockerfile的两种方法 1.hi

随机推荐