357

テキスト型の入力ボックスにグリフィコンを追加するにはどうすればよいですか? たとえば、次のようなユーザー名入力に「icon-user」を入れたいとします。

ここに画像の説明を入力

4

15 に答える 15

65

公式の方法。カスタム CSS は不要:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

デモ: http://jsfiddle.net/yajf3b7q

このデモは、Bootstrap ドキュメントの例に基づいています。ここで「オプションのアイコン付き」まで下にスクロールしますhttp://getbootstrap.com/css/#forms-control-validation

ここに画像の説明を入力

于 2014-04-22T20:44:38.880 に答える
6

これは、base64 URI エンコーディングを使用してグリフィコンの画像表現を CSS に直接埋め込むことで、マークアップをシンプルに保つ非ブートストラップ ソリューションです。

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">

于 2015-04-17T17:31:12.060 に答える
4

:beforeCSS の疑似要素を使用してグリフィコンを配置する別の方法を次に示します。

jsFiddle での動作デモ

この HTML の場合:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

この CSS を使用します ( Bootstrap 3.x および Webkit ベースのブラウザーと互換性があります) 。

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

@Friziが言ったpointer-events: none;ように、カーソルが入力フォーカスを妨げないように追加する必要があります。他のすべての CSS ルールは、適切なスペースを中央に配置して追加するためのものです。

結果：

スクリーンショット

于 2014-03-21T03:29:18.857 に答える
1

また、Bootstrap 3.3.5 を使用した場合、次の 1 つの決定があります。

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

入力では、次のようなものがあります。 ここに画像の説明を入力

于 2015-11-24T19:49:37.067 に答える
0

既存のブートストラップ クラスと少しのカスタム スタイルでこれを行うことができるはずです。

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>

編集 アイコンはicon-userクラスを介して参照されます。この回答は、Bootstrap バージョン 2 の時点で書かれています。次のページで参照を確認できます: http://getbootstrap.com/2.3.2/base-css.html#images

于 2013-09-16T23:35:59.270 に答える