CSS Bootstrap 3 在输入字段内放置图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22913532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Placing Icon inside input field
提问by zazvorniki
I am working in Bootstrap 3 and am trying to get a calendar icon inside the right hand side of the input box.
我在 Bootstrap 3 中工作，并试图在输入框的右侧获取日历图标。
My html looks like this:
我的 html 看起来像这样：
<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>
I have tried position: absolutelike this:
我试过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.
但是当我这样做时，它会在一个地方看起来很棒，但在另一个实例中不会正确定位。
I have also tried to see if I could use text-indentto see if this would work throughout, but it had the same effect.
我也试图看看我是否可以text-indent用来看看这是否会在整个过程中起作用，但它具有相同的效果。
.right-inner-addon i,
.form-group .right-inner-addon i {
display: inline-block;
z-index: 3;
text-indent: -15px;
font-size: 1.3em;
}
采纳答案by Zim
You can use input-group add-onwith a input-group-btn.
您可以使用input-group add-on一个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>
With a little CSS to hide the button border:
用一点 CSS 来隐藏按钮边框：
/* 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;
}
回答by KyleMit
Using bootstrap's native validation statesis probably preferable to writing custom CSS here.
And I'm pretty sure that I'm the one who came up with the CSS in question.
使用bootstrap 的原生验证状态可能比在此处编写自定义 CSS 更可取。
而且我很确定我就是提出相关 CSS 的人。
Just use .has-feedbackon your form-group and .form-control-feedbackon your icon:
只需.has-feedback在您的表单组和.form-control-feedback图标上使用：
<div class="form-group has-feedback">
<label class="control-label sr-only">DatePicker</label>
<input type="text" class="form-control date-picker" />
<i class="fa fa-calendar form-control-feedback"></i>
</div>
Demo in jsFiddle
jsFiddle 中的演示
回答by scarecrow
Check this fiddle, adapted from this answer
The difference being that in your case the <i>was placed after <input>. Swapping them makes it work. That's why the positioning was creating a mess as opposed to the cited answer.
不同之处在于，在您的情况下，<i>放置在<input>. 交换它们使其工作。这就是为什么定位会造成混乱而不是引用的答案。
回答by Bharat
In above answers, Input click works but click on i tag is not working. so I have added my code in answer of @KyleMit
在上面的答案中，输入点击有效，但点击 i 标签无效。所以我在@KyleMit 的回答中添加了我的代码
<div class="form-group has-feedback">
<input type="text" name="txtDatepicker" class="form-control date-picker" />
<i class="glyphicon glyphicon-calendar"
onclick="javascript:$('input[name=txtDatepicker]').data('DateTimePicker').show();">
</i>
</div>
I changed css little bit for my UI. You also can change it.
我为我的 UI 稍微改变了 css。你也可以改变它。
<style>
.right-inner-addon {
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon i {
position: absolute;
left: 256px;
padding: 14px 12px;
}
</style>
