HTML CSS に基づく検索アイコン付き検索ボックス機能を実装する

序文

フロントエンドで非常に便利な、小さなアイコン付きの検索ボックスを作成する方法をご紹介します。

エフェクト表示

ここに画像の説明を挿入

基本的な考え方

1. 絶対位置を使用して検索画像を検索ボックスの上に配置します

2. 入力ボックスのテキストインデントを、検索画像のサイズと画像の左右の余白の大きさに設定します。

準備する

以下のような検索アイコン画像

ここに画像の説明を挿入

コード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>検索ボックスのデモ</title>
 <スタイル タイプ="text/css">
  *{
   マージン: 0;
   パディング: 0;
  }
  体{
   幅：100vw;
   高さ：100vh;
   背景: 放射状グラデーション(中央、
    #3498db、#2980b9);
   ディスプレイ: フレックス;
   コンテンツの中央揃え: 中央;
   アイテムの位置を中央揃えにします。
  }
  div.検索{
   高さ: 40px;
   幅: 500ピクセル;  
  }
  div.検索フォーム{
   幅: 100%;
   高さ: 100%;
  }
  div.searchフォーム入力:nth-child(2){
   幅: 400ピクセル;
   高さ: 100%;
   フォントサイズ: 16px;
   テキストインデント: 40px;
   境界線: なし;
   フロート: 左;
  }
  div.searchフォーム入力:nth-child(3){
   幅: 100ピクセル;
   高さ: 100%;
   フォントサイズ: 16px;
   文字間隔: 5px;
   境界線: なし;
  }
  div.検索フォームimg{
   位置: 絶対;
   左：50vw;
   変換: translateX(-250px);
   上マージン: 10px;
   左マージン: 10px;
   高さ: 20px;
  }
 </スタイル>
</head>
<本文>
 <div class="検索">
  <フォームアクション="#" メソッド="投稿">
   <img src="./search_ico.png" alt="">
   <input type="text" name="condition" placeholder="検索条件を入力してください">
   <input type="submit" value="検索">
  </フォーム> 
 </div>
</本文>
</html>

要約する

上記は、エディターが導入した HTML CSS に基づく検索アイコン付きの検索ボックス機能です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: HTMLタグのフルネームと機能の紹介

>>: MySQLグループクエリ最適化方法