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

Question

我在 Bootstrap 中借助 input-group 创建了一个文本框和一个提交按钮:

<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 添加另一个 span，但那是在创建按钮之类的东西。我希望图标位于文本框内并使其可点击。任何人都可以建议一种方法吗？

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