Bootstrap 3 将图标放置在输入框内

Question

我正在使用 Bootstrap 3 并尝试将日历图标放在输入框右侧。

我的 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>

我已经尝试使用position: absolute来实现：

.right-inner-addon i {
    position: absolute;
    right: 5px;
    top: 10px;
    pointer-events: none;
    font-size: 1.5em;
}
.right-inner-addon {
    position: relative;
}

但是当我这样做时，在一个位置上看起来很棒，但在另一个实例中位置不正确。

我还尝试过使用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;
}

这是一个可能会有帮助的 jsFiddle 示例

- zazvorniki

---

可能是与此问题重复：https://dev59.com/a2Mk5IYBdhLWcg3w7COX - scarecrow

@scarecrow 不是的，因为那个方法不起作用。我已经仔细阅读了那篇文章，并尝试了他们提到的所有方法。但是同样的代码在某些地方可以运行，而在其他地方却不行。 - zazvorniki

似乎有一个可用的解决方案..http://jsfiddle.net/KyleMit/cyCFS/ - scarecrow

@scarecrow 但是你看了我的代码吗？ - zazvorniki

Answer 1

使用 Bootstrap的原生验证状态 可能比在此编写自定义的CSS更可取。
^{而且我相当确定我就是提出这个CSS的人。}

只需在您的表单组上使用.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>

在 jsFiddle 中演示

- KyleMit

---

@zazvorniki，伙计，这里不需要投反对票。您可以使用验证状态提供的类来为输入控件提供有关该控件用途的视觉反馈。它不一定是关于验证本身的。这只是一种反馈机制。而且它可以直接使用，无需编写自定义CSS。我不明白你的负面反应是什么？您问如何在输入框内部放置图标。这个答案难道没有实现吗？ - KyleMit

@zazvorniki，好的，我20小时前发布了这个答案。你在18:32:56刚刚评论了10分钟，然后5秒钟后的18:33:01我就收到了一个踩。所以我就这样假设了。 - KyleMit

我没有点踩，除非回答真的很糟糕，否则我不相信点踩按钮的存在。我想我应该在这里说的是，虽然验证方法是实现这一目标的一种方式，但其他人（包括我自己）可能不希望使用验证状态。例如，我在这里使用了一个日历，如果只有一个字段有状态而其他字段没有状态，那就很奇怪了。此外，我从来没有完全理解为什么要回答一个已经有解决方案并且几个月前发布的问题... - zazvorniki

你知道人们常说的关于假设的话吗... :) - zazvorniki

我正在寻找如何将图标放置在输入元素内。这个答案很棒，非常感谢。 - FrenkyB

Answer 2

您可以使用带有 input-group-btn 的 input-group add-on。

<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来隐藏按钮边框：

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

- Zim

---

谢谢！我能够使用bootstrap3做到这一点，但是无论我如何努力，我都无法使用bootstrap4解决它。非常感谢你的帮助！ - zazvorniki

skelly，我最初选择了一个输入组，其中内部边框也被删除了。但是，正如你所知道的那样，这使得焦点效果变得棘手，或者在你的情况下，不存在。我认为验证状态提供了更好的用户界面。请参见我的答案。 - KyleMit

Answer 3

请查看此Fiddle，它是从这个答案中改编而来的。与该答案不同之处在于，在您的情况下，<i>放置在<input>之后。交换它们可以使其正常工作。这就是为什么位置会变得混乱，而不是引用的答案的原因。

- scarecrow

---

我已经详细检查了这段代码。最初我在输入之前放置了“i”，那时我开始遇到问题。问题出在绝对定位上，有些地方它看起来很好，但是一旦我将其移动到另一个位置，定位就会出错，我真的不想每次想要包含日历时都重新定位它。上面的解决方案完美地解决了问题，无需进行任何定位。 - zazvorniki

Answer 4

在上面的答案中，输入点击是有效的，但是对于 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>

我稍微改了一下我的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>

- Bharat