フォーム内の入力要素内にアイコンを挿入

Question

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

でライブバージョン：リンクされたサイトは、これをやってのけるためにCSSのトリックの組み合わせを使用していますTidal Force theme

Answer 1

。まず、<input>要素の背景画像を使用します。次に、カーソルを押し上げるために、padding-leftを使用します。言い換えれば

、彼らはこれらの二つのCSSルールがあります。

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

Answer 2

ちょうどあなたのCSSのbackgroundプロパティを使用します。

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

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

Answer 3

あなたはこれを試すことができます：他のユーザーが投稿し

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

Answer 4

CSSのソリューションは、これを実現するための最良の方法です。

問題がある場合は（IE6を参照）、div内にフチ無しの入力を使用することもできます。

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

古いバージョンのブラウザでは機能しませんが、「クリーン」ではありません。

Answer 5

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

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

Answer 6

私はこれを最高かつ最もクリーンな解決策にしています。使用テキストインデント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" /> 

Answer 7

<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> 

たとえば、あなたがこれを使用することができます）。背景画像無し

Answer 8

溶液：

#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>

Answer 9

フォント・アイコンで使用

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

OR