[转]Add Bootstrap Glyphicon to Input Box
本文转自:http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box
How can I add a glyphicon to a text type input box? For example I want to have 'icon-user' in a username input, something like this:
576down voteaccepted
|
Without Bootstrap:We'll get to Bootstrap in a second, but here's the fundamental CSS concepts in play in order to do this yourself. As beard of prey points out, you can do this with CSS by absolutely positioning the icon inside of the input element. Then add padding to either side so the text doesn't overlap with the icon. So for the following HTML:
You can use the following CSS to left and right align glyphs:
Demo in Plunker
With Bootstrap:As buffer points out, this can be accomplished natively within Bootstrap by using Validation States with Optional Icons. This is done by giving the The simplest example would be something like this:
Pros:
Cons:
To overcome the cons, I put together this pull-request with changes to support left aligned icons. As it is a relatively large change, it has been put off until a future release, but if you need these features today, here's a simple implementation guide: If you're using less, just include these changes in your project. If you're not using less, grab the file and convert it to CSS with any online LESS Compiler. Then, all you have to do is include the class Since there are a lot of possible html configurations over different form types, different control sizes, different icon sets, and different label visibilities, I created a test page that shows the correct set of HTML for each permutation along with a live demo. Here's a demo in Plunker
Didn't find what you were looking for? Try these similar questions: |
[转]Add Bootstrap Glyphicon to Input Box的更多相关文章
- 实现bootstrap布局的input输入框中的图标点击功能
使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...
- bootstrap glyphicon图标无法显示
如果不注意bootstrap引入css和fonts的规范,则可能会导致bootstrap 在显示glyphicon图标时无法正常显示,显示为方框. 此时可搜索bootstrap.css中的.glyph ...
- [转]How to Add Bootstrap to an Angular CLI project
本文转自:https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/ In this article we w ...
- bootstrap模态框input不能获取焦点并编辑【转】
Bootstrap模态框时input标签[日期控件也有这样的问题]不能编辑的问题,下面是我的解决方法: 1.将下图中框出来的属性删掉即可: 2.兼容火狐浏览器,笔者在火狐中还是不能编辑,去掉下图属性即 ...
- Bootstrap中关于input里file的样式更改
给input里file类型加button样式 1.在Bootstrap中input里的file类型样式很不美观,一个按钮加一段文字,还会随浏览器的不同呈现不同的样式,所以开发的时候可以将file的样式 ...
- 去除bootstrap默认的input和选中时的样式
input默认样式除border外, 还有一个阴影效果box-shadow:选中时同样有阴影效果. input,input:focus{ border: none !important; box-sh ...
- Bootstrap系列 -- 14. 表单控件输入框input
每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...
- angulajs 当input使用 bootstrap的email类型时,如果是无效的email格式,则ng-model无效的情况
当使用bootstrap的如下input时 <input type="email" ng-model="userid"> 如果输入的内容是无效的em ...
- Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
随机推荐
- django drf viewsets和routers
1.定义VIew from django.shortcuts import render from rest_framework.views import APIView from rest_fram ...
- python学习之路 六 :装饰器
本节重点: 掌握装饰器相关知识 python装饰器就是用于拓展原来函数功能的一种函数,这个函数的特殊之处在于它的返回值也是一个函数,使用python装饰器的好处就是在不用更改原函数的代码前提下给函 ...
- JAVA程序对MYSQL数据库加锁实验
什么是脏读,不可重复读,幻读 1. 脏读 :脏读就是指当一个事务正在访问数据,并且对数据进行了修改,而这种修改还没有提交到数据库中,这时,另外一个事务也访问这个数据,然后使用了这个数据. 2. 不可重 ...
- MongoDB复制集与Raft协议异同点分析
此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 一.日志复制流程: a.raft leader节点在接收client请求后,先将请求写到日志中,再将日志通过 ...
- OI计算几何 简单学习笔记
学习平面几何,首先我们要会熟练地应用向量,其次也要知道一些基本的几何知识.(其实看看数学课本就可以了吧) 因为是看的蓝书,所以很多东西做了引用.(update:还参考了赵和旭dalao的讲义) 下面先 ...
- 6.margin塌陷问题
当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: <!DOCTYPE html><ht ...
- python 和pycharm 安装
昨天 我重新装了一个Windows 7 系统 结果很多东西丢了 没有做好备份 其中就有python 和pycharm 今天花了一天时间装 想想也是够了 坑真多 整理一下吧 python 网址:http ...
- kvm虚拟机动态迁移
相比KVM虚拟机静态迁移中需要拷贝虚拟机虚拟磁盘文件,kvm虚拟机动态迁移无需拷贝虚拟磁盘文件,但是需要迁移到的虚拟主机之间需要有相同的目录结构虚拟机磁盘文件,本文这部分内容通过nfs来实现,当然也可 ...
- Linux centos 7安装
Linux 安装 本章节我们将为大家介绍Linux的安装. 本章节以 centos6.4 为例. centos 下载地址: 可以去官网下载最新版本:https://www.centos.org/dow ...
- Python3.6引入的f-string 与 Python 3的新的特性:类型注解;
f-string 1.介绍 f-string(formatted string literals):格式化字符串常量,是Python3.6新引入的一种字符串格式化方法,使格式化字符串的操作更加简便. ...