最近、私は弁護士をフロントデスクに推奨するウェブサイトを書いています。上の検索ボックスに問題がありました。検索アイコンを検索ボックスに入れたかったのですが、長い間あまり満足のいくものではありませんでした...
これ以上苦労せずに、トピックに直接行きましょう。
基本的なアイデア
実際、入力ボックスとその背後のアイコンをDivに置き、入力ボックスのborder 0pxに設定し、最終的にDivのborder最終的な外側の境界に設定します
コードを直接アップロードします。
HTML：
<div class = search> <form action = http：//baidu.com> <入力タイプ=テキストプレースホルダー=検索した弁護士または専門知識を入力してください> <span> <
CSS：
これがDiv全体を屋外に設定するスタイルです
.search {width：250px;高さ：35px;ボーダー：1px固体白。ボーダーラジウス：30px;}入力ボックスの長さと幅を内部に設定するには、ボーラーが0px、フォントサイズは内側にあり、クリックすると境界線が明るくありません（アウトライン：なし）
ここではrgba()を使用して透明性を設定すると、最後のプロパティは透明性です（0-1）
input {width：200px;高さ：35px;ボーダー：0;フォントサイズ：14px;アウトライン：なし;背景色：RGBA（255、255、255、0）;色：白;フォントサイズ：16px;マージン：0 10px;要約しますこれは、透明な入力ボックスにアイコンを追加するHTMLの実装コードに関する記事です。より関連するHTML透明な入力ボックスアイコンコンテンツについては、wulin.comから以前の記事を検索するか、以下の関連記事を閲覧し続けてください。将来、誰もがwulin.comをサポートすることを願っています！