最近、弁護士推薦のウェブサイトを作成していたのですが、検索ボックスに問題がありました。検索ボックス内に検索アイコンを配置したかったのですが、多くの作業を行った後でも、まだうまくいきませんでした... では、これ以上前置きせずに、早速本題に入りましょう。 基本的な考え方 実際には、入力ボックスとその背後にあるアイコンをdivに配置し、入力ボックスの コードに直接進みます: 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) 入力{ 幅: 200ピクセル; 高さ: 35px; 境界線: 0; フォントサイズ: 14px; アウトライン: なし; 背景色: rgba(255, 255, 255, 0); 色: 白; フォントサイズ: 16px; マージン: 0 10px; 要約する これで、HTML 透明入力ボックスにアイコンを追加する実装コードに関するこの記事は終了です。より関連性の高い HTML 透明入力ボックス アイコン コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Vue で $props、$attrs、$listeners を使用する方法の詳細な説明
>>: シンプルなナビゲーションバー機能を実現するHTML+CSS
シェルで変数が空かどうかを判断する方法シェルプログラミングでは、パラメータのエラーチェック項目に、変...
1. リポジトリイメージをダウンロードする docker プルレジストリ 2. プライベートウェアハ...
ケース1 vue-cliはvue3プロジェクトをビルドし、プロジェクトをLinuxサーバーにアップロ...
MySQL ストレージ エンジンの概要ストレージ エンジンとは何ですか? MySQL のデータは、さ...
遅延読み込み(レイジー読み込み)とプリロードは、Web 最適化によく使用される手段です。 。 1. ...
Linux topコマンドの紹介top コマンドは、Linux でよく使用されるパフォーマンス分析ツ...
目次1. 4つのコンセプト1. JavaScriptはシングルスレッドです2. タスクキュー3. 同...
序文仮想通貨の狂気的な投機により、マイニングウイルスは犯罪者が最も頻繁に使用する攻撃方法の 1 つに...
Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...
コードをコピーコードは次のとおりです。 <ヘッド> <meta http-equi...
私は長い間この問題に悩まされていましたが、検索してみたところ、実際にこの問題を解決した人がいることが...
目次序文1. NJSモジュールをインストールする方法1: NJSモジュールを動的にロードする方法2:...
目次1. 関数の抽出2. 重複した条件付きスニペットを結合する3. 条件分岐文を関数に抽出する4. ...
目次序文:結果: 1.重合効果: 2. 散布効果:具体的な実装手順: 1. プロジェクトにOpenL...
最近、あるプロジェクトのクライアントが、上部に 2 つのタブ メニューを配置することを要求しました。...