精华内容
下载资源
问答
  • 如果你在使用element-ui自定义插件的时候,想保持和element风格一致,需要用到...el-input v-model="form.name1" prefix-icon="el-icon-search" /> </el-form-item> <el-form-item label="图标在后">

    如果你在使用element-ui自定义插件的时候,想保持和element风格一致,需要用到输入框,并且里面有icon小图标,不需要自己手写样式,可以通过下面2种方法实现
    在这里插入图片描述

    方法1:
    <el-form-item label="图标在前">
       <el-input v-model="form.name1" prefix-icon="el-icon-search" />
    </el-form-item>
     <el-form-item label="图标在后">
        <el-input v-model="form.name2" suffix-icon="el-icon-date" />
     </el-form-item>
    
    方法2:
    <el-form-item label="图标在前">
       <el-input v-model="form.name1">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </el-form-item>
    <el-form-item label="图标在后">
       <el-input v-model="form.name2">
          <i slot="suffix" class="el-input__icon el-icon-date"></i>
      </el-input>
    </el-form-item>
    

    第一种方法说明:
    prefix-icon图标位置在前面
    suffix-icon图标位置在后面

    el-icon-search 搜索小图标
    el-icon-date 日期小图标

    第二种方式是通过slot来插入

    其他图标还有很多,都是通过伪类添加的,可以看一下源码找一下

    展开全文
  • 感兴趣的小伙伴们可以参考一下使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标,如下图:但是在将图标放入input输入框中,这些小图标是无法获得...

    这篇文章主要为大家详细介绍了

    bootstrap

    布局中

    input

    输入框右侧图标点击功能实现的

    相关代码,感兴趣的小伙伴们可以参考一下

    使用

    bootstrap

    布局可以在

    input

    的输入框中添加譬如登录名输入框中的一键清除图标和

    密码输入框中显示密码的小眼睛图标,如下图:

    但是在将图标放入

    input

    输入框中,这些小图标是无法获得点击事件的;

    那么问题来了,怎样让这些小图标能够获得点击事件呢?

    我也不知道,但是可以用一种迂回的方式,来间接的实现该功能。

    ***

    重点来了:

    解决方案:

    在小图标的位置上,

    添加一个看不见的元素,

    元素的大小正好将小图标覆盖,

    但是没有背景颜色和边框;相当于给小图标盖了一个透明的被子;

    代码如下

    :

    <div class="input-group">

    <span

    class="input-group-addon"><i

    class="glyphicon

    glyphicon-user"></i></span>

    <input

    type="text"

    class="form-control"

    placeholder="

    /

    /

    "

    id="userName">

    <span

    class="glyphicon

    glyphicon-remove-circle

    form-control-feedback"

    style="display:inline-block;"></span> <--

    小图标元素

    -->

    <span

    style="display:inline-block;border:1px

    solid

    red;width:30px;height:30px;position:absolute;right:2px;z-index:100;cursor:

    pointer;"></span> <--

    覆盖在小图标上面的元素

    -->

    </div>

    将事件添加在这个覆盖在小图标上的元素,

    小图标的作用仅仅是根据需要进行显示和隐

    藏即可;

    如此便间接实现了,

    小图标的点击效果,

    是不是很棒的解决方法,

    谢谢大家的阅读,希

    望能帮助大家顺利解决问题。

    展开全文
  • input文件夹图标

    2016-09-23 11:56:26
    [img=https://img-bbs.csdn.net/upload/201609/23/1474602746_353135.png][/img]怎么让选择文件的效果是这样,我做的是这样的[img=https://img-bbs.csdn.net/upload/201609/23/1474602949_783026.png][/img]
  • input如何添加图标

    千次阅读 2019-08-09 16:49:00
    设置class类属性,添加小图标。创建<style>标签,然后在这个标签里面设置user样式。 1.使用background-image设置input背景图片; 2.background-size设置背景图片的大小; 3.background-positi...

     

    代码:<input type="text" class="user" />

     

    设置class类属性,添加小图标。创建<style>标签,然后在这个标签里面设置user样式。

       1.使用background-image设置input背景图片;

       2.background-size设置背景图片的大小;

      3.background-position设置背景图片的位置;

      4.background-repeat设置背景图片不重复;

      5.padding设置图片的内边距。

     

    css样式代码:

    <style type="text/css">

     .user{

       background-image: url(img/user.png);/*设置小图标*/

      background-size: 25px 25px;/*小图标的大小*/

      background-position: 5px 4px;/*小图标在input的位置*/

      background-repeat: no-repeat;/*背景小图标不重复*/

      padding: 8px 10px 8px 40px;/*设置input内边距*/

      /*设置input样式好看*/

      border:1px solid #ddd;

      margin: 30px;

      width: 220px;

    }

    </style>

     

    展开全文
  • input里添加小图标

    万次阅读 2017-11-11 11:49:31
    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>

    over!

    展开全文
  • 图标input

    2017-10-21 13:43:58
    图标input 我写的这段代码是一个登陆页,响应式且垂直居中 html代码
  • input后面的图标点击事件为input的事件 解决问题: <view class="top"> <input class="resarch" placeholder="输入文章标题" type="text" placeholder-style="font-size:30rpx;color:#000000;" ><...
  • input添加小图标

    2017-03-23 15:13:00
    新建一个html文件。如图 在<body>标签中输入一个<div>标签,然后在<...input type="text">标签。 代码: <div class="div-bor"> <i class="icon-user"></i> ...
  • 使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标,如下图:   但是在将图标放入input输入框中,这些小图标是无法获得点击事件的; 那么问题来了,...
  • input输入框添加内部图标

    千次阅读 2018-12-07 23:30:00
    input输入框添加内部图标 话不多说,看一下最终效果 我们的思路是,在一个div中,加入一个div和一个input标签,小div在左侧,input放右侧,用box-sizing:border-box,这句代码代表的是这个:怪异盒子模型 =>...
  • 微信小程序中使用input组件,点击上面的清空图标...不要试图将清空图标放在input组件的上面,清空图标使用 cover-view 和 cover-image 组件也不可以。 第二种方法: 设置 input 的 padding-right 大于图标的宽度。 ...
  • input框加图标

    2020-03-06 16:58:43
    <el-form ref="form" :model="form">...el-input v-model="form.name" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input> </el-form> // suffix-icon 在搜索框后加入图...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义带图标input样式</title> <style> .test{ ...
  • 使用方式是 加入 layui-icon 类, 然后在input 直接使用 unicode 就ok, unicode就是下面这一串代码 <i class="layui-icon">&#xe60c;</i> <input type="text" name="prodSche" lay-verify=...
  • bootstrap3 input 输入框图标背景

    千次阅读 2015-08-20 10:10:09
    直接上代码 @ @ //在这里面你可以加你想要的,换图标的话去官网找吧,后面的就是控制图标
  • el-input自定义icon图标

    千次阅读 2020-04-23 19:26:53
    <el-input class="inputt" placeholder="请输入账号" v-model="form.name"> <i slot="prefix" style="display: flex;align-items: center;"> <img ...
  • bootstrap3如何在input输入框插入glyphicon图标呢?插入图标看起来比较醒目,满足用户体验价值观,此功能应用于各大网站。 怎么把图标放在输入框的开头?? 用户名 <span class=glyphicon></span> <input ...
  • input左侧加入小图标

    千次阅读 2019-11-25 20:51:22
    https://www.jianshu.com/p/662b24b335b6 根据上述参考地址,html结构修改如下 <div> <img src="..." /> </div> <input type="..." placeholder="..." />
  • 图标input输入框

    2019-06-01 04:46:47
    NULL 博文链接:https://fanshuyao.iteye.com/blog/2071044
  • el-input是element-ui中的一个组件,在element-ui中文手册中有详细的介绍。其中,带 icon 的输入框示例如下: 对应的代码是: <div class="demo-input-suffix"> 属性方式: <el-input placeholder=...
  • 大家在做网站的时候,经常需要在input里面添加小图标功能,看似功能很简单,但是实现起来还是有点技巧的,下面小编给大家介绍下JS Input里添加小图标的两种方法,需要的朋友参考下吧
  • input标签中添加一个图标

    热门讨论 2020-11-27 17:36:29
    input标签中添加一个icon图标基本可以分为两种 1.将icon图标存储为本地图片,然后设置为input的背景图,然后通过background-position来调整图标在输入框的位置 2.使用一个div包裹两个子div,其中第一个div里面...
  • input中加入搜索图标

    2018-09-30 17:04:00
    1. HTML代码: <div class="box"> <label for="q" id="q_label">请输入关键字<...input id="q" type="text"> <i class="am-icon-search search" id="q_i"></...
  • Vue 实现带图标input

    千次阅读 2019-02-20 17:42:37
    最近由于项目需要,需要实现一个带图标input框,但一直没有找到一个很好的方法,所以只能自己动手写了。 该控件是单独写的,所以可以拿来直接使用。 先说一下该控件支持的功能: 1.从外部动态传入placeholder的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,190
精华内容 476
关键字:

input图标