html – 将Twitter Bootstrap图标添加到输入框

如何在文本输入元素的右侧添加Twitter Bootstrap图标图标搜索?

以下尝试将所有图标放在输入元素内,我们如何裁剪它,以便只显示图标搜索的图标?

当前尝试

CSS

input.search-box {
    width: 180px;
    background: #333;
    background-image: url('/img/glyphicons-halflings-white.png');
    background-position: -48px 0;
    padding-left: 30px;
    margin-top: 45px;
    border: 0;
    float: right;
}
更新Bootstrap 3.x

你可以这样使用.input-group类:

<div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

Working Demo in jsFiddle for 3.x

Bootstrap 2.x

你可以这样使用.input-append类:

<div class="input-append">
    <input class="span2" type="text">
    <button type="submit" class="btn">
        <i class="icon-search"></i>
    </button>
</div>

Working Demo in jsFiddle for 2.x

两者看起来都像这样:

如果您想要输入框中的图标,如下所示:

然后看我的答案Add a Bootstrap Glyphicon to Input Box

http://stackoverflow.com/questions/16875392/add-twitter-bootstrap-icon-to-input-box

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:html – 将Twitter Bootstrap图标添加到输入框