テキスト タイプの入力ボックスにグリフィコンを追加するにはどうすればよいですか? たとえば、ユーザー名入力に「icon-user」を追加したい場合、次のようになります。
ベストアンサー1
Bootstrapなし:
Bootstrapについては後ほど説明しますが、これを自分で行うために役立つ基本的なCSSの概念を次に示します。獲物のひげが指摘するCSS を使用して、入力要素内にアイコンを絶対配置することでこれを実現できます。次に、テキストがアイコンと重ならないように、両側にパディングを追加します。
したがって、次の HTML の場合:
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-user"></i>
<input type="text" class="form-control" />
</div>
次の CSS を使用してグリフを左揃えおよび右揃えにすることができます。
/* enable absolute positioning */
.inner-addon {
position: relative;
}
/* style icon */
.inner-addon .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
}
/* align icon */
.left-addon .glyphicon { left: 0px;}
.right-addon .glyphicon { right: 0px;}
/* add padding */
.left-addon input { padding-left: 30px; }
.right-addon input { padding-right: 30px; }
Plunkerのデモ
注: これは、グリフィコン、しかし、同様に機能します素晴らしいフォント
FAの場合は、次.glyphiconのように置き換えます。.fa
Bootstrap の場合:
としてバッファが指摘するこれはBootstrap内でネイティブに実行できます。オプションアイコン付きの検証状態.form-groupこれは、要素に のクラスを与え.has-feedback、アイコンに のクラスを与えることによって行われます.form-control-feedback。
最も単純な例は次のようになります。
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
長所:
- さまざまなフォーム タイプ (基本、水平、インライン) のサポートが含まれています
- さまざまなコントロール サイズ (既定、小、大) のサポートが含まれています
短所:
- 左揃えアイコンのサポートは含まれません
欠点を克服するために、私はこれをまとめましたプルリクエスト左揃えアイコンをサポートするように変更されました。これは比較的大きな変更であるため、将来のリリースまで延期されていますが、これらの機能が今すぐ必要な場合は、次の簡単な実装ガイドを参照してください。
ただ、これらのフォームはCSSで変更されます（下部の隠しスタックスニペットでもインライン化されています）
*LESS：あるいは、少ない手段で構築、ここにフォームの変更が少ない
次に、アイコンを左揃えにするには、.has-feedback-leftクラスを持つすべてのグループにクラスを含めるだけです。.has-feedback
さまざまなフォーム タイプ、さまざまなコントロール サイズ、さまざまなアイコン セット、さまざまなラベルの表示に応じてさまざまな HTML 構成が考えられるため、ライブ デモとともに、それぞれの組み合わせに対する正しい HTML セットを表示するテスト ページを作成しました。
Plunkerのデモはこちら
追伸 friziの提案追加
pointer-events: none;されたブートストラップに追加
探していたものが見つかりませんでしたか? 次の類似の質問をお試しください:
左揃えのフィードバックアイコン用の追加 CSS
.has-feedback .form-control {
padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
padding-right: 46px;
}
.has-feedback-left .form-control {
padding-right: 12px;
padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
left: 0;
}
.form-control-feedback {
line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
width: 30px;
height: 30px;
line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
width: 46px;
height: 46px;
line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
top: 0;
}
@media (min-width: 768px) {
.form-inline .inline-feedback {
position: relative;
display: inline-block;
}
.form-inline .has-feedback .form-control-feedback {
top: 0;
}
}
.form-horizontal .has-feedback-left .form-control-feedback {
left: 15px;
}