精华内容
下载资源
问答
  • input输入框添加内部图标

    千次阅读 2018-12-07 23:30:00
    input输入框添加内部图标 话不多说,看一下最终效果 我们的思路是,在一个div中,加入一个div和一个input标签,div在左侧,input放右侧,用box-sizing:border-box,这句代码代表的是这个:怪异盒子模型 =>...

    有可能在制作网页的过程中遇到各种美化表单设计,这次我们来试着做一个demo

    将input输入框添加内部图标

    话不多说,看一下最终效果

    我们的思路是,在一个div中,加入一个div和一个input标签,小div在左侧,input放右侧,用box-sizing:border-box,这句代码代表的是这个:怪异盒子模型 => 盒子定长定宽,不管有没有padding,border,margin,始终就是这么大,影响的只会是里面的元素。

    左侧的div给border,也要给border-radius,右边的input只给右边的border,不给border-radius,input里面padding-left最好设置一下,更加美观。

    总体思路其实是把大的div做成让人感觉像是一个input,如果能做到,那么你就成功了。下面附代码

     1 <div class="student-name-box">
     2 <div>
     3 <img src="./img/学号.png" />
     4 </div>
     5 <input type="text" value="" placeholder="请输入学号" />
     6 </div>
     7 <div class="student-id-box">
     8 <div>
     9 <img src="./img/密码.png" />
    10 </div>
    11 <input type="password" placeholder="请输入密码" />
    12 </div>

     

     1 .student-name-box,.student-id-box{
     2 box-sizing: border-box;
     3 width:300px;
     4 height:36px;
     5 border: 2px solid #DDD;
     6 border-radius: 5px;
     7 margin-top: 27px;
     8 margin-left: 50%;
     9 transform: translateX(-50%);
    10 }
    11 input{
    12 box-sizing: border-box;
    13 margin-bottom: 1px;
    14 outline: none;
    15 width:264px;
    16 height:32px;
    17 padding-left: 10px;
    18 border:0;
    19 }
    20 .student-name-box div:first-child
    21 ,.student-id-box div:first-child{
    22 box-sizing: border-box;
    23 float: left;
    24 width: 32px;
    25 height: 32px;
    26 background: rgb(233,236,239);
    27 background-position:8px 10px;
    28 border-right: 2px solid #DDD;
    29 }
    30 .student-name-box img,.student-id-box img{
    31 width: 16px;
    32 height: 16px;
    33 margin:8px;
    34 }

    大家又想看的表单美化或是界面美化也可以在下方留言给我哦

    加油啊柯基

     

    转载于:https://www.cnblogs.com/JobsOfferings/p/JonsOfferings_input_icon.html

    展开全文
  • 基于vue框架,使用element-ui组件库写表单效果,需要添加字体小图标,效果如下:                  ...

             基于vue框架,使用element-ui组件库写表单效果,需要添加字体小图标,效果如下:
                                                 在这里插入图片描述

       1.只需要添加prefix-icon="iconfont icon-xxx"即可(头部插入)

    //例如
    <el-input 
    	prefix-icon="iconfont icon-sousuo" 
    	v-model="searchTableInfo" 
    	placeholder="请输入姓名" 
    	style="width:240px"
    ></el-input>
    

       2.添加suffix-icon=“iconfont icon-xxx”(尾部添加)

    //例如
    <el-input 
    	suffix-icon="iconfont icon-sousuo" 
    	v-model="searchTableInfo" 
    	placeholder="请输入姓名" 
    	style="width:240px"
    ></el-input>
    
    展开全文
  •  但是在将图标放入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>

      将事件添加在这个覆盖在小图标上的元素,小图标的作用仅仅是根据需要进行显示和隐藏即可;

      如此便间接实现了,小图标的点击效果;  

    转载于:https://www.cnblogs.com/hellobajie/p/5497068.html

    展开全文
  • 感兴趣的小伙伴们可以参考一下使用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输入框中,这些小图标是无法获得点击事件的; 那么问题来了,怎样让这些小图标能够获得点击事件呢? 我也不知道,但是可以用一种迂回的方式,来间接的实现该功能。 ***重点来了: 解决方案:在...
  • 微信程序input输入框添加删除按钮,真机focus时无法删除 原因:真机测试输入框获得焦点时层级会比删除图标更高,所以点不到删除图标。 解决方案:缩小输入框的宽度,使之获得焦点时不会覆盖删除图标。 input { ...
  • html之输入框嵌套小图标

    千次阅读 2017-09-21 07:01:45
    <!DOCTYPE html> <title>input添加小图标 .phone-input { padding-right: 20px; background: url("勇气值.png") no-repe
  • 微信程序wxss为输入框添加图标

    千次阅读 2019-08-16 09:49:24
    使用background:url(), 因微信程序不支持本地图标,所以将本地图片转成base64. 图片转base64 下面首先是wxss内容。 .input-text { height:80rpx; margin: 0 auto; border: 1px solid #d2d2d2; background: url...
  • Mac本密码输入框聚焦的时候会显示一个钥匙的图标,点击可以提示用户保存密码。 想要去掉这个的话,添加以下css样式即可: input::-webkit-credentials-auto-fill-button { display: none !important; ...
  • 小程序input框中加入小图标

    万次阅读 2018-06-17 17:44:41
    最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下:然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误:emmmm 好像小程序的background-...
  • 最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: emmmm 好像小程序的...
  • 以下写到的几个demo是我...1.给input输入框添加小图标 实现思路:使用一个div包裹input,设置div的background为要使用的小图标即可: .icon-div { border:solid 1px #ccc; width:200px; height:30px; } .icon-d
  • layDate 输入框内添加小图标可点击

    千次阅读 2019-04-18 15:04:22
    如下图,在layDate的输入框内,添加了一个icon图标,并希望点击图标,也可以和点击输入框一样,弹出日期选择框。 实现代码: <input type="text" placeholder="请选择开始时间" id="startTime"> <i class=...
  • Bootstrap4 输入框

    2020-12-14 02:55:50
    我们可以使用 .input-group 类来向表单输入框添加更多的样式,如图标、文本或者按钮。 使用 .input-group-prepend 类可以在输入框的的前面添加文本信息, .input-group-append 类添加输入框的后面。 最后,我们...
  • 通过为表单添加 .form-horizontal 类,并联合使用 ...这篇文章主要为大家详细介绍了 bootstrap 布局中 input 输入框右侧图标点击功能实现的 相关代码,感兴趣的伙伴们可以参考一下 使用 bootstrap 布局可以在 inpu...
  • 11.1 HTML5 INPUT输入框控制手机输入键盘 11.2 HTML5利用CSS3排版的墙贴相册 11.3 HTML5网页离线数据库 11.4 可拨打电话的HTML连接 11.5 HTML5取回所在经纬度坐标并反查地址 附录A 如何发布程序到Android Market A.1...
  • js使用技巧

    2014-07-11 09:57:29
    ENTER键可以让光标移到下一个输入框 <input onkeydown="if(event.keyCode==13)event.keyCode=9"> 文本框的默认值 <input type=text value="123" onfocus="alert(this.defaultValue)"> title换行 obj.title = ...
  • 编辑器 KindEditor 4.0.4

    2012-02-12 10:45:07
    快速:体积,加载速度快 开源:开放源代码,高水平,高品质 底层:内置自定义 DOM 类库,精确操作 DOM 扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能 风格:修改编辑器风格非常容易,只需修改...
  •  11.1 HTML5 INPUT输入框控制手机输入键盘  11.2 HTML5利用CSS3排版的墙贴相册  11.3 HTML5网页离线数据库  11.4 可拨打电话的HTML连接  11.5 HTML5取回所在经纬度坐标并反查地址  附录A 如何发布程序到...
  • 11.1 html5 input输入框控制手机输入键盘 788 11.2 html5利用css3排版的墙贴相册 789 11.3 html5网页离线数据库 793 11.4 可拨打电话的html连接 797 11.5 html5取回所在经纬度坐标并反查地址 800 ...
  • 创建一个具有文字提示的文本输入框 4.4节. 创建一个合适的编辑器 4.5节. 确定用户电脑上安装的所有字体 4.6节. 创建一个自定义的TextInput 4.7节. 为一段文本设置风格属性 4.8节.在HTML里显示图片和SWF文档 4.9节. ...
  • -- 微信程序中,将一个参数设置空字符串,结果会变成字符串"true" --> <view class="u-form-item--left" :style="{ width: uLabelWidth, flex: `0 0 ${...
  • 3.7.3. 默认图标好单调,改一下撒 3.7.4. 偷偷告诉你咋从节点弹出对话框 3.7.5. 小小提示 3.7.6. 给树节点设置超链接 3.8. 灰壳显灵!让我直接修改树节点的名称吧! 3.9. 我拖,我拖,我拖拖拖。 3.9.1. 树形节点的...
  • 11.1 HTML5 INPUT输入框控制手机输入键盘 11.2 HTML5利用CSS3排版的墙贴相册 11.3 HTML5网页离线数据库 11.4 可拨打电话的HTML连接 11.5 HTML5取回所在经纬度坐标并反查地址 附录A 如何发布程序到Android Market A.1...
  • 11.1 HTML5 INPUT输入框控制手机输入键盘 11.2 HTML5利用CSS3排版的墙贴相册 11.3 HTML5网页离线数据库 11.4 可拨打电话的HTML连接 11.5 HTML5取回所在经纬度坐标并反查地址 附录A 如何发布程序到Android Market A.1...
  • 11.1 HTML5 INPUT输入框控制手机输入键盘 11.2 HTML5利用CSS3排版的墙贴相册 11.3 HTML5网页离线数据库 11.4 可拨打电话的HTML连接 11.5 HTML5取回所在经纬度坐标并反查地址 附录A 如何发布程序到Android Market A.1...
  • 11.1 HTML5 INPUT输入框控制手机输入键盘 11.2 HTML5利用CSS3排版的墙贴相册 11.3 HTML5网页离线数据库 11.4 可拨打电话的HTML连接 11.5 HTML5取回所在经纬度坐标并反查地址 附录A 如何发布程序到Android Market A.1...
  •  显示用户加入购物车的商品,计算总的价格,提供全选和取消全选的按钮,从后台获取商品的单价,判断当前剩余的数量,当用户点击数量添加或者减少之后,对于总价要实时刷新,采用jQuery对数据进行修改,当用户取消...
  • 工具栏可以放置多个小图标和关闭图标。 左侧右侧可拖动拉伸,并自动记忆宽高位置,重启后恢复。 双击摄像机节点自动播放视频,双击节点自动依次添加视频,会自动跳到下一个,双击父节点自动添加该节点下的所有视频。...

空空如也

空空如也

1 2
收藏数 35
精华内容 14
关键字:

input输入框添加小图标