透明な入力ボックスにアイコンを追加する HTML コード

最近、弁護士推薦のウェブサイトを作成していたのですが、検索ボックスに問題がありました。検索ボックス内に検索アイコンを配置したかったのですが、多くの作業を行った後でも、まだうまくいきませんでした...

では、これ以上前置きせずに、早速本題に入りましょう。

基本的な考え方

実際には、入力ボックスとその背後にあるアイコンをdivに配置し、入力ボックスのborder 0pxに設定し、最後にdivのborder最終的な外側の境界線に設定します。

コードに直接進みます:

HTML:

<div class="検索">
        <フォームアクション="http://baidu.com">
           <input type="text" placeholder="探している弁護士または専門知識を入力してください">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </フォーム>
</div>

CS: ...

div全体のスタイルは次のようになります

。検索 {
    幅: 250ピクセル;
    高さ: 35px;
    境界線: 1px 白の実線;
    境界線の半径: 30px;
}

ここでは入力ボックスの長さと幅を設定します。フレームは 0px、内部のフォントサイズ、クリックしても境界線は点灯しません (outline:none)
透明度を設定するには、 rgba()を使用します。最後の属性は透明度 (0 から 1 の間) です。

入力{
    幅: 200ピクセル;
    高さ: 35px;
    境界線: 0;
    フォントサイズ: 14px;
    アウトライン: なし;
    背景色: rgba(255, 255, 255, 0);
    色: 白;
    フォントサイズ: 16px;
    マージン: 0 10px;

要約する

これで、HTML 透明入力ボックスにアイコンを追加する実装コードに関するこの記事は終了です。より関連性の高い HTML 透明入力ボックス アイコン コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。