Bootstrap 3 在输入字段内放置图标 [英] Bootstrap 3 Placing Icon inside input field

问题描述

我在 Bootstrap 3 中工作，并试图在输入框的右侧获得一个日历图标.

我的 html 看起来像这样:

<div class='right-inner-addon col-md-2 日期日期选择器'数据日期格式=yyyy-mm-dd"><input name='name' value="" type="text" class="form-control date-picker"数据日期格式="yyyy-mm-dd"/><i class="fa fa-calendar"></i>

我试过这样的position: absolute:

.right-inner-addon i {位置:绝对；右:5px；顶部:10px；指针事件:无；字体大小:1.5em；}.right-inner-addon {位置:相对；}

但是当我这样做时，它会在一个地方看起来很棒，但在另一个实例中却无法正确定位.

我也尝试过是否可以使用 text-indent 来查看这是否可以在整个过程中起作用，但效果相同.

.right-inner-addon i,.form-group .right-inner-addon i {显示:内联块；z-索引:3；文本缩进:-15px；字体大小:1.3em；}

这里有一个 jsFiddle 可能会有帮助

解决方案

您可以将 input-group add-on 与 input-group-btn 一起使用.>

<div class='input-group add-on col-md-2 date datepicker'数据日期格式=yyyy-mm-dd"><input name='name' value="" type="text" class="form-control date-picker"数据日期格式="yyyy-mm-dd"/><div class="input-group-btn"><button class="btn btn-default"><i class="fa fa-calendar"></i>

用一点 CSS 隐藏按钮边框:

/* 删除控件之间的边框 */.add-on .input-group-btn >.btn {边框左宽度:0；左:-2px;-webkit-box-shadow: 插入 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow: 插入 0 1px 1px rgba(0, 0, 0, 0.075);}/* 停止发光的蓝色阴影 */.add-on .form-control:focus {-webkit-box-shadow:无；框阴影:无；边框颜色:#cccccc；}

演示:http://bootply.com/128059

I am working in Bootstrap 3 and am trying to get a calendar icon inside the right hand side of the input box.

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>

I have tried position: absolute like this:

.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-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;
}

Here's a jsFiddle that might help

解决方案

You can use input-group add-on with a 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:

/* 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; 
}

Demo: http://bootply.com/128059

这篇关于Bootstrap 3 在输入字段内放置图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！