フォームの入力要素内にアイコンを配置する


272

フォームの入力要素内にアイコンを配置するにはどうすればよいですか?

アイコンが含まれている3つの入力があるWebフォームのスクリーンショット

ライブバージョン:Tidal Forceテーマ


2
@IvanSokalskiyこれは、誰かがBootstrapを使用していることを前提としています。これに遭遇したすべての人がBootstrapを使用するわけではありません!
バリーマイケルドイル

回答:


392

リンクしたサイトは、CSSトリックの組み合わせを使用してこれを実現しています。まず、<input>要素にbackground-imageを使用します。そして、カーソルを合わせるためにを使いpadding-leftます。

つまり、次の2つのCSSルールがあります。

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

2
上部と左側のパラメーター(7px 7 px)とその他の属性について詳しく教えてください。それは役に立ちます。
QMaster、2014年

262
アドバイス:IE 8の使用とサポートを停止してください
コーダー

3
画像を入力フィールドの右端に配置するにはどうすればよいですか?
ishanbakshi 2015年

3
背景画像の問題点は、Chromeのオートフィルは、背景画像を削除し、完全に背景が黄色になることです
カタリンRădoi

1
右揃えにするには:background-position:right;
存在理由

52

他のユーザーが投稿したCSSソリューションは、これを達成するための最良の方法です。

これで問題が発生する場合(IE6を参照)、div内でボーダレス入力を使用することもできます。

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

「クリーン」ではありませんが、古いブラウザで動作するはずです。


2
この回答への良い追加。つまり、問題が発生することもあります。これは、問題の1つを解決するための良い方法です。代わりにスパンを使ってくれましたが
ロス

入力内により複雑な構造を追加する良い方法です!
jonhue 2017年

@jonhue、あなたが過去10年間まだ生きていて、IE6をサポートする必要がない限り、これはお勧めしません。それでも「きれい」とは言いません。
harpo 2017年

@harpo入力内にリンクをどのように含めますか?
jonhue 2017年

35

背景画像のないソリューション:

#input_container {
    position:relative;
    padding:0 0 0 20px;
    margin:0 20px;
    background:#ddd;
    direction: rtl;
    width: 200px;
}
#input {
    height:20px;
    margin:0;
    padding-right: 30px;
    width: 100%;
}
#input_img {
    position:absolute;
    bottom:2px;
    right:5px;
    width:24px;
    height:24px;
}
<div id="input_container">
    <input type="text" id="input" value>
    <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>


34

あなたはこれを試すことができます:

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}

26

私はこれが最良で最もクリーンな解決策だと思っています。使用するテキストインデントをinputの要素

CSS:

#icon{
background-image:url(../images/icons/dollar.png); 
background-repeat: no-repeat; 
background-position: 2px 3px;
}

HTML:

<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />

3
padding-leftはフィールドの幅を広げ、親要素からはみ出すため、テキストインデントをサポートしています。
Kostiantyn

1
#icon cssではなくインラインでスタイルを配置したのはなぜですか?
ウィリアムジャッド2017

@WylliamJuddこれはデモンストレーションの目的のみです:)
Rust

なぜクラスの代わりにidを使用したのですか?
マジッドsavalanpour

9

入力内にアイコンを配置するシンプルで簡単な方法は、以下のコードに示すように、position CSSプロパティを使用することです。注:わかりやすくするために、コードを簡略化しています。

  1. 入力とアイコンを囲むコンテナを作成します。
  2. コンテナの位置を相対的に設定します
  3. アイコンを絶対位置として設定します。これにより、周囲のコンテナを基準にアイコンが配置されます。
  4. 上、左、下、右のいずれかを使用して、アイコンをコンテナに配置します。
  5. 入力内のパディングを設定して、テキストがアイコンと重ならないようにします。

#input-container {
  position: relative;
}

#input-container > img {
  position: absolute;
  top: 12px;
  left: 15px;
}

#input-container > input {
  padding-left: 40px;
}
<div id="input-container">
  <img/>
  <input/>
</div>


1
はい、クリーンでシンプルです。また、入力ボーダーを削除し、にボーダーをinput { border: none; }追加して#input-container { border: 1px solid #000; }、画像が内部にあり、実際に入力の一部のように見えるようにする必要があります。
Mario Werner

1
@MarioWerner彼は画像を入力内に押し込みました。ボーダーハックを行う必要はありません。それが美しさです。このアイデアを使用します。
フール

8
.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

上記のタグをCSSファイルに追加し、指定されたクラスを使用します。


6

これは私にとってはうまくいきます:

input.valid {
   border-color: #28a745;
   padding-right: 30px;
   background-image: url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png');
   background-repeat: no-repeat;
   background-size: 20px 20px;
   background-position: right center;
}
<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>


Chromeでオートコンプリート時に画像が消える
海王星

「保存」アイコンを使用している場合など、画像をどのようにクリック可能にしますか?
user460114 2018

ハイブリッドアプリではうまくいきました。画像を挿入した後、入力ボックス全体をクリック可能にしました。
shivam srivastava

5

あなたはこれを試すことができます:Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec

<div class="container">
            <form>
                <div class="row">
                    <div class="input-group mb-3 col-sm-6">
                      <input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        <div class="input-group-prepend bg-white">
                            <span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>






4

CSSでbackgroundプロパティを使用するだけです。

<input id="foo" type="text" />

#foo
{
    background: url(/img/foo.png);
}

4

こんな状況でした。のために機能しませんでしたbackground: #ebebeb;。入力フィールドに背景を配置したかったのですが、そのプロパティは常に背景画像の上に表示されていて、画像が見えませんでした。そのため、backgroundプロパティをbackground-imageプロパティの上に移動し、それが機能しました。

input[type='text'] {
    border: 0;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
    background: #ebebeb;
}

私の場合の解決策は:

input[type='text'] {
    border: 0;
    background: #ebebeb;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
}

ジャストは、言及しborderpaddingおよびtext-alignプロパティは解決のためには重要ではありません。元のコードを複製したところです。


1
これは非常に古く、おそらく1年以上前から学んだことを願っていますbackgroundが、すべての背景プロパティを一度にカバーするために使用する省略プロパティ名ですbackground: [color] [image url] [repeat] [position]。そのため、色によってすべてが上書きされていました。そのままにして、プロパティの名前をbackground-color
borbulon

@borbulonはい、あなたは正しいです。ほとんどの場合、省略形のプロパティ名を使用するのが最善ですが、完全に同意します。ただし、この投稿の目的は、プロパティの順序が重要になる場合があることを指摘することです。これらの「小さな」CSSルールは、特に開発中の新規参入者にとって、非常に苛立たしいものになる可能性があります。
ファンタ

1
完全に同意しますが、要点はそのままです:backgroundは省略形のプロパティ名です。より適切な修正は、省略形を使用せずbackground-color、色プロパティに使用することでした(色と画像の両方が必要であると想定)。
ボルブロン

3

font-iconでの使用

<input name="foo" type="text" placeholder="&#61447;">

または

<input id="foo" type="text" />

#foo::before
{
  font-family: 'FontAwesome';
  color:red;
  position: relative;
  left: -5px;
  content: "\f007";    
}

7
:: beforeはinput要素に適用できないようです。
ビシュニャ2018

1
 <label for="fileEdit">
    <i class="fa fa-cloud-upload">
    </i>
    <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
  </label>

たとえば、これを使用できます:非表示の入力を持つラベル(アイコンが存在します)。


1

最初にこのcssクラスを入力に使用し、それに応じてカスタマイズします。

    
 .inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
 }
<input class="inp-icon" type="text">


この画像にのみクリックイベントを設定する方法を知っていますか?
アルジュン

0

これは多かれ少なかれ標準的なフォームで私にとってはうまくいきます:

  <button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.