将引导字形添加到输入框 [英] Add Bootstrap Glyphicon to Input Box
问题描述
如何将字形加入文字类型输入框?例如,我想在用户名输入中有icon-user,例如:
没有Bootstrap:
我们将在第二部分介绍Bootstrap,但这里是基本的CSS概念,以便自己做。由于
注意:这表示您正在使用
PS frizi的建议添加
pointer-events:none;
已经添加到引导
未找到您要查找的内容?尝试以下类似问题:
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:
解决方案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:
<div class="inner-addon left-addon"> <i class="glyphicon glyphicon-user"></i> <input type="text" class="form-control" /> </div>
You can use the following CSS to left and right align glyphs:
/* enable absolute positioning */ .inner-addon { position: relative; } /* style icon */ .inner-addon .glyphicon { position: absolute; padding: 10px; pointer-events: none; } /* align icon */ .left-addon .glyphicon { left: 0px;} .right-addon .glyphicon { right: 0px;} /* add padding */ .left-addon input { padding-left: 30px; } .right-addon input { padding-right: 30px; }
Demo in Plunker
Note: This presumes you're using glyphicons, but works equally well with font-awesome.
For FA, just replace.glyphicon
with.fa
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
.form-group
element the class of.has-feedback
and the icon the class of.form-control-feedback
.The simplest example would be something like this:
<div class="form-group has-feedback"> <label class="control-label">Username</label> <input type="text" class="form-control" placeholder="Username" /> <i class="glyphicon glyphicon-user form-control-feedback"></i> </div>
Pros:
- Includes support for different form types (Basic, Horizontal, Inline)
- Includes support for different control sizes (Default, Small, Large)
Cons:
- Doesn't include support for left aligning icons
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
.has-feedback-left
on any group that has the class.has-feedback
in order to left align the icon.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
P.S. frizi's suggestion of adding
pointer-events: none;
has been added to bootstrapDidn't find what you were looking for? Try these similar questions:
这篇关于将引导字形添加到输入框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!