1. ホーム
  2. Web制作
  3. HTML/Xhtml

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

2022-02-05 21:42:56

弁護士紹介のフロントサイトを書いているのですが、検索ボックスで困っています。検索ボックスの中に検索アイコンを入れたいのですが、なかなかうまくいかない・・・・・・。

前置きはこのくらいにして、早速本題に入りましょう。

<スパン 基本的な考え方

実際には、入力ボックスをdivの中に入れて、その後ろにアイコンを配置し、その上に border を0pxに設定し、最後にdivの border を最終的な外枠として設定します。

私たちの最もわかりやすいコードは

HTMLです。

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="Please enter the attorney or specialty you are looking for">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSSです。

ここでは、div の外側全体のスタイルを設定します。

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

これは、中の入力ボックスの長さと幅、ボーダーを0pxに、中のフォントサイズ、クリックしたときにボーダーを点灯させない(outline:none)ことを設定するものです。
ここで透明度を設定するには rgba() 最後のプロパティはtransparency(0から1の間)です。

input {
    width: 200px;
    height: 35px;
    border: 0;
    font-size: 14px;
    outline: none;
    background-color: rgba(255, 255, 255, 0);
    color: white;
    font-size: 16px;
    margin: 0 10px;

概要

透明な入力ボックスにアイコンを追加するHTMLコードについての説明は以上となります。透明な入力ボックスにアイコンを追加するHTMLコードについては、スクリプトハウスの過去の記事を検索していただくか、引き続き以下の記事をご覧ください。