CSS を使用して入力フィールド内にアイコンを埋め込むにはどうすればよいですか?

入力要素内にアイコンを配置する

フォームの入力フィールドにアイコンを埋め込むと、美しさと使いやすさが向上します。これを実現するには、参照サイトで採用されている手法を調べてみましょう。

背景画像とパディング

このアプローチでは、CSS を利用してブラウザをだましてアイコンを表示させます。これは、background-image やbackground-position などのプロパティを使用して、背景画像を入力要素に組み込みます。

同時に、コードは入力の padding-left 値を変更してカーソル位置を移動し、重ならないようにします。アイコン付き。したがって、ユーザー入力用のスペースを残したまま、アイコンが入力フィールド内に表示されます。

コード例:

前述のサイトでは、この効果を実現するために次の CSS ルールを実装しています。

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

この例では、comment-author.gif という名前の背景画像がアイコンとして使用され、アイコンの左上から 7 ピクセルの位置にあります。入力要素。 30 ピクセルの左パディング値はカーソルを右に押し出し、テキスト入力に十分なスペースを提供します。

これらの CSS トリックを組み合わせることで、アイコンを入力要素にシームレスに統合し、視覚的な魅力を高め、フォームのユーザー エクスペリエンス。

以上がCSS を使用して入力フィールド内にアイコンを埋め込むにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。