テキストタイプの入力ボックスにグリフィコンを追加するにはどうしたらいいですか?例えば、ユーザー名の入力欄に 'icon-user'を入れたいのですが、以下のようになります。
.
Bootstrapについては後ほど説明しますが、ここでは自分でこれを行うために必要な基本的なCSSの概念を説明します。 獲物のヒゲが指摘するように][ヒゲの答え]CSSでこれを行うには、アイコンをinput要素の中に絶対的に配置します。 そして、テキストがアイコンと重ならないように左右にパディングを追加します。 つまり、次のようなHTMLです。
<input type="text" class="form-control" />
以下の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; }
となっています。 **Pros**: * 異なるフォームタイプ(Basic、Horizontal、Inline)をサポートしています。 * 異なるコントロールサイズ(デフォルト、スモール、ラージ)をサポートしています。 **短所**: * アイコンを左寄せにする機能がありません。 短所を克服するために、私は左揃えのアイコンをサポートするための変更を加えたこの[pull-request][pull-request]をまとめました。 これは比較的大きな変更なので、将来のリリースまで延期されましたが、もしあなたがこの機能を**今**必要としているなら、ここに簡単な実装ガイドがあります。 ただ、[**フォームの変更点をcssに含める**][formChangs.css] (下部の隠しスタックスニペットでインライン化されています)注:これは、glyphiconsを使用していることを前提としていますが、font-awesomeでも同じように動作します。
FAの場合は、.glyphicon
を.fa
に置き換えるだけです。Bootstrap で。
buffer points out]buffer answerにあるように、Validation States with Optional Iconsを使うことで、Bootstrap内でネイティブに実現できます。 これは、
<input type="text" class="form-control" placeholder="Username" />.form-group
要素に.has-feedback
のクラスを与え、アイコンに.form-control-feedback
のクラスを与えることで実現できます。 最も簡単な例は次のようなものです。 整理すると、以下のようになります。 クラス=
***LESS**: 代わりに、[less経由で構築][lessコンパイラ]している場合は、[フォームの変更点をlessに含める][formChanges.less]
.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;
}
HTMLを使用しています。
<div class="col-md-4">
<input class="form-control" type="search" />
<span class="glyphicon glyphicon-search"></span>
</div>
CSS
.form-control {
padding-right: 30px;
}
.form-control + .glyphicon {
position: absolute;
right: 0;
padding: 8px 27px;
}
既存のbootstrapクラスと少しのカスタムスタイリングでできるはずです。
<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