web-dev-qa-db-ja.com

入力ボックスにブートストラップ文字を追加する

テキストタイプの入力ボックスにグリフアイコンを追加する方法を教えてください。例えば、私はユーザー名の入力に 'icon-user'を入れたいのですが、これは次のようなものです。

enter image description here

csstwitter-bootstrapglyphicons
324
doovers

ブートストラップなし

あとでBootstrapに取り掛かりますが、これを自分で行うための基本的なCSSの概念は次のとおりです。 獲物のあごひげが指す として、あなたは絶対にinput要素の内側にアイコンを配置することによって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のデモ

css screenshot

Note：これはあなたが グリフィコン を使っていることを前提としていますが、 font-awesome と同じようにうまくいきます。
FAの場合、単に.glyphiconを.faに置き換えます。

ブートストラップ付き：

bufferが指摘する として、これは オプションアイコン付きの検証状態 を使用することで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>

長所：

  • さまざまなフォームタイプ（基本、水平、インライン）のサポートを含みます
  • さまざまなコントロールサイズ（デフォルト、小、大）のサポートを含みます

短所：

  • left整列アイコンのサポートは含まれません

短所を克服するために、私はこれをまとめました pull-request 左揃えのアイコンをサポートするための変更を加えました。これは比較的大きな変更であるため、将来のリリースまで延期されていますが、これらの機能が必要な場合は今日、これが簡単な実装ガイドです。

これらのフォームの変更をcssに含める （一番下の隠しスタックスニペットでインライン展開されています）
* LESS：あるいは、あなたが lessを介して構築 の場合、 formがlessで変更されます

次に、アイコンを左揃えにするために、クラス.has-feedback-leftを持つ任意のグループにクラス.has-feedbackを含めるだけです。

さまざまなフォームタイプ、さまざまなコントロールサイズ、さまざまなアイコンセット、さまざまなラベルの表示設定に対して、さまざまなHTML設定が可能であるため、並べ替えごとに正しいHTMLセットと実際のデモを表示するテストページを作成しました。

これがPlunkerのデモです

feedback screenshot

P.Sfriziの提案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;
}
723
KyleMit

official メソッド。カスタム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/LS2Ek/1/

このデモはBootstrapのドキュメントの例に基づいています。ここで「With Optional Icons」までスクロールします http://getbootstrap.com/css/#forms-control-validation

enter image description here

61
user

これはCSSのみの代替案です。私はこれを検索フィールドに設定して、Firefox（および他の100のアプリ）に似た効果を得ます。

ここにいじる 。

_ 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;
}
42
beardofprey

これが私がデフォルトのブートストラップCSS v3.3.1だけを使ってやった方法です：

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

そしてこれはそれがどのように見えるかです：

enter image description here

11
Garry English

この '詐欺'は、グリフィコンクラスが入力コントロールのフォントを変更するという副作用で動作します。

Fiddle

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

副作用を取り除きたい場合は、 "glyphicon"クラスを削除して次のCSSを追加することができます（プレースホルダーの擬似要素をスタイルするためのより良い方法があるかもしれません。私はChromeでのみテストしました）。

Fiddle

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

おそらくもっときれいな解決策：

Fiddle

_ css _ 

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

_ html _ 

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />
8
greenbender

カスタムCSSなしで、公式のブートストラップ3.xバージョンのクラスを使って行うことができます。

input-group-addonの内側で、inputタグの前にinput-groupを使用してから、任意のグリフィコンを使用してください。

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

これが出力です

enter image description here

それをカスタマイズするためにさらにカスタムcssファイルにカスタムcssの2行を追加する（必要ならパディングを調整してください）

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

input-group-addonの背景を透明にし、inputタグの左グラデーションをゼロにすることで、入力はシームレスに見えます。これがカスタマイズされた出力です

enter image description here

これがjsbinです example

これは、ラベルを重ねること、input-lgを使用している間の整列、およびタブの問題に焦点を当てることのカスタムcss問題を解決します。

7
Dheeraj

これは、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">
6
mccainz

Fontawesome を使用している場合は、これを実行できます。

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

結果

enter image description here

Unicodeの完全なリストは/にあります 完全なFont Awesome 4.6.3アイコンリファレンス

6
Merlin
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">
4
Angel Patel

CSSの :before 疑似要素を使用してグリフコンを配置することでこれを行う別の方法があります。

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ルールは、適切な間隔を中央に配置して追加するためのものです。

結果：

screenshot

4
Richard Cotrina

あなたはそのUnicode HTMLを使うことができます

ユーザーアイコンを追加するには、placeholder属性に&#xe008;を追加するか、必要な場所に追加します。

このチートシート を確認してください。

例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

次のコードを使用して、入力のフォントをGlyphiconのフォントに設定することを忘れないでください。font-family: 'Glyphicons Halflings', Arial、ここで、 Arial は入力内の通常のテキストのフォントです。

1
Mona Lisa

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>

入力で私はこのようなものがあります： enter image description here

1
Vitalii Nesterenko

あなたはこれを既存のブートストラップクラスとちょっとしたカスタムスタイルでできるはずです。

<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クラスを介して参照されます。この回答は、ブートストラップバージョン2の時点で作成されました。次のページで参照を確認できます。 http://getbootstrap.com/2.3.2/base-css.html#images

0
YOOOEE

ブートストラップ4でテスト済み。

form-controlを取り、そのクラスにis-validを追加します。コントロールがどのように緑色に変わるかに注目してください、しかしもっと重要なことに、コントロールの右側にあるチェックマークアイコンに注意してください。これが私たちが欲しいものです！

例：

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
        <input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>
0
Igor Krupin

最新のブラウザしか必要としない幸運な人は、css transform translateを試してください。これはラッパーを必要とせず、入力スピナーを収容するためにinput [type = number]のためのスペースを広げることができるように、またはハンドルの左側に移動するようにカスタマイズできます。

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

0
httpete