フォームのinput要素にアイコンを入れる

フォームのinput要素にアイコンを入れるにはどうしたらいいですか？

.

ライブバージョンはこちら。[Tidal Force theme][2].

[2]： http://www.elegantthemes.com/preview/TidalForce/?p=9

Ryan B
編集された質問 9日 7月 2013 в 3:04
プログラミング
icons forms css input element
27日 5月 2009 в 7:36
19 ビュー
ソリューション

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

言い換えれば、これら2つのCSSルールがあります。

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

これを試してみてください。

用意したのは以下の通りです。 background-image: url(images/comment-author.gif); background-position:7px 7px; background-repeat: no-repeat; }

解説 (0)

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

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

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