1. ホーム
  2. ハイパーリンク

[解決済み】フォームのinput要素にアイコンを配置する

2022-03-26 15:37:17

質問

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

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

解決するには?

リンク先のサイトでは、CSSのトリックを組み合わせて、このような方法をとっています。 まず、背景画像として <input> 要素で構成されています。 次に、カーソルを押し出すために padding-left .

つまり、この2つのCSSルールを持っているのです。

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