Bootstrap 3将图标放置在输入字段中 [英] Bootstrap 3 Placing Icon inside input field
本文介绍了Bootstrap 3将图标放置在输入字段中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在Bootstrap 3中工作,我想在输入框的右侧获得一个日历图标。
I am working in Bootstrap 3 and am trying to get a calendar icon inside the right hand side of the input box.
我的html看起来像这样:
My html looks like this:
<div class="col-md-12">
<div class='right-inner-addon col-md-2 date datepicker'
data-date-format="yyyy-mm-dd">
<input name='name' value="" type="text" class="form-control date-picker"
data-date-format="yyyy-mm-dd"/>
<i class="fa fa-calendar"></i>
</div>
</div>
我试过 position:absolute
:
.right-inner-addon i {
position: absolute;
right: 5px;
top: 10px;
pointer-events: none;
font-size: 1.5em;
}
.right-inner-addon {
position: relative;
}
但是当我这样做会看起来很棒,
But when I do it will look great in one spot, but will not be positioned correctly in another instance.
我也尝试看看是否可以使用 text-indent
来查看这将在整个工作,但它有同样的效果。
I have also tried to see if I could use text-indent
to see if this would work throughout, but it had the same effect.
.right-inner-addon i,
.form-group .right-inner-addon i {
display: inline-block;
z-index: 3;
text-indent: -15px;
font-size: 1.3em;
}
推荐答案
使用 input-group-btn
将输入组附加组件
。
<div class="col-md-12">
<div class='input-group add-on col-md-2 date datepicker'
data-date-format="yyyy-mm-dd">
<input name='name' value="" type="text" class="form-control date-picker"
data-date-format="yyyy-mm-dd"/>
<div class="input-group-btn">
<button class="btn btn-default">
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
</div>
使用一些CSS隐藏按钮边框:
With a little CSS to hide the button border:
/* remove border between controls */
.add-on .input-group-btn > .btn {
border-left-width: 0;
left:-2px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/* stop the glowing blue shadow */
.add-on .form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color:#cccccc;
}
这篇关于Bootstrap 3将图标放置在输入字段中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文