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

透明な入力ボックスにアイコンを追加する 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 を応援していただければ幸いです。

<<:  Vue で $props、$attrs、$listeners を使用する方法の詳細な説明

>>:  シンプルなナビゲーションバー機能を実現するHTML+CSS

推薦する

変数が空かどうかを判定するシェルの方法の概要

シェルで変数が空かどうかを判断する方法シェルプログラミングでは、パラメータのエラーチェック項目に、変...

dockerプライベート倉庫の構築と利用の詳細説明

1. リポジトリイメージをダウンロードする docker プルレジストリ 2. プライベートウェアハ...

LinuxサーバーにVueプロジェクトをデプロイする

ケース1 vue-cliはvue3プロジェクトをビルドし、プロジェクトをLinuxサーバーにアップロ...

MySQLのストレージエンジンの詳細な説明

MySQL ストレージ エンジンの概要ストレージ エンジンとは何ですか? MySQL のデータは、さ...

js での遅延読み込みとプリロードの具体的な使用法

遅延読み込み(レイジー読み込み)とプリロードは、Web 最適化によく使用される手段です。 。 1. ...

Linux システムのパフォーマンスを分析するための top コマンドの詳細な説明

Linux topコマンドの紹介top コマンドは、Linux でよく使用されるパフォーマンス分析ツ...

Javascript 操作メカニズム イベントループ

目次1. 4つのコンセプト1. JavaScriptはシングルスレッドです2. タスクキュー3. 同...

Linux サーバーに埋め込まれた ddgs および qW3xT.2 マイニング ウイルスの対処の実践記録

序文仮想通貨の狂気的な投機により、マイニングウイルスは犯罪者が最も頻繁に使用する攻撃方法の 1 つに...

Vueはルールを使用してフォームフィールドの検証を実装します

Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...

モバイルデバイス Web 開発における HTML ヘッドの書き方

コードをコピーコードは次のとおりです。 <ヘッド> <meta http-equi...

IE ラベル LI テキスト折り返し問題について

私は長い間この問題に悩まされていましたが、検索してみたところ、実際にこの問題を解決した人がいることが...

njs モジュールを使用して nginx 構成に js スクリプトを導入する

目次序文1. NJSモジュールをインストールする方法1: NJSモジュールを動的にロードする方法2:...

11 の素晴らしい JavaScript コード リファクタリングのベスト プラクティスの概要

目次1. 関数の抽出2. 重複した条件付きスニペットを結合する3. 条件分岐文を関数に抽出する4. ...

vue+openlayer をベースにマップの集約と散乱効果を実現

目次序文:結果: 1.重合効果: 2. 散布効果:具体的な実装手順: 1. プロジェクトにOpenL...

小さなプログラムが天井に張り付いてしまう問題を完璧に解決するためにposition:stickyを使用する方法

最近、あるプロジェクトのクライアントが、上部に 2 つのタブ メニューを配置することを要求しました。...