将带有输入组类的可单击图标添加到文本框

Question

我input-group在Bootstrap 的帮助下创建了一个Textbox和一个提交按钮:

<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
            Search
        </button>
    </span>
</div>
</div>

我想在文本框中添加一个可点击的地理位置图标,我尝试做很多事情,比如添加另一个跨度,input-group-addon但是创建一个按钮类的东西.我希望图标位于文本框内并使其可单击.任何人都可以建议一种方法吗？

Answer 1

添加anchor一个类,glyphicon然后在position:absolute下面进行如下操作:

DEMO

<div class="input-group input-group-lg col-lg-6 col-centered">
    <a href="#" onclick="alert('clicked');" class="glyphicon glyphicon-map-marker"></a>
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
            Search
        </button>
    </span>
</div>

CSS

.glyphicon-map-marker{
    position:absolute;
    z-index:1000;
    top:30%;
    left:2%;
}
a.glyphicon-map-marker
{
     text-decoration: none !important;
}