検索バーのHTMLに画像を表示する

bigchungus

このテーブルを完成させ、検索機能を追加しました。しかし、検索バーには、W3Schoolsの例のように、背景画像の検索アイコンpngファイルを配置したいと思いますmyInputフィールドに入力しましたが、検索バーに何も表示されないか、検索アイコンの上部の小さな部分が表示されるほど大きく、修正方法がわかりません。

投稿の背景サイズの編集

検索ボックスの入力要素

#myInput {
  background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
<input type="text" id="myInput">

マーヴィン

background-sizeプロパティを使用する必要があります。画像が入力よりも大きいため、画像の白い部分が表示されます。プロパティをcontain画像に設定すると、のサイズに縮小されますinput

#myInput {
  background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 30px;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
<input placeholder="Search..." type="text" id="myInput">

注:background-positionプロパティを0に設定するか、すべて一緒に削除する必要もあります。そうしないと、検索アイコンが右下に傾いてしまいます。代わりにアイコンを小さくしたい場合は、選択したpx値に変更background-positionleft centerて設定background-sizeします。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

検索バーの横に画像を配置する方法

分類Dev

一度に5つの結果のみを検索バーに表示する

分類Dev

xamarinフォームの検索バーで検索アイコンを非表示にする方法

分類Dev

特定のルートで検索バーを非表示にするAngular6

分類Dev

リストのいくつかの項目を検索バーに表示する

分類Dev

開始時に検索バーを非表示にする方法

分類Dev

NSMenuItemに検索バーを表示する方法

分類Dev

UISearchControllerの検索バーをプログラムで表示する

分類Dev

iOS 7の場合、ユーザーが検索バーを下にスワイプするまで検索バーを非表示にします

分類Dev

HTML検索バーに結果を表示するための新しいタブを開くようにする方法

分類Dev

iOS8のナビゲーションバーに検索バーを表示する

分類Dev

ホバー時に画像の上に画像を表示する方法

分類Dev

ホバー時に画像の上に画像を表示する方法

分類Dev

リストビューのスクロール時に検索バーを非表示にする

分類Dev

検索結果を別のページに表示する方法

分類Dev

SQL検索フォームの結果を表に表示する

分類Dev

グーグル検索バーの下に表示されるのと同じ予測検索データを取得する方法

分類Dev

ユーザー入力後に結果を表示するJavaScript検索バー

分類Dev

アプリケーション メニューの検索バーを非表示にする Ubuntu 18.04 Gnome 3

分類Dev

多くの画像を検索して表示するwpf

分類Dev

検索ごとに検索結果を表示するこのビューページャーを更新する方法

分類Dev

HTML:画像とビデオに透明なカバーを表示する

分類Dev

他のViewControllerの検索バーとSearchDisplayControllerでデータを表示する方法

分類Dev

検索バーのテキストを削除し、検索前に表示に戻ります。迅速

分類Dev

検索バーが別の行に表示されるのはなぜですか?

分類Dev

データバインドによるtd値検索から特定のデータを一覧表示します

分類Dev

iOS 7を非表示にすると、検索バーが白くなります

分類Dev

UISearchControllerの検索バーのキャンセルボタンを非表示にする

分類Dev

検索バーの下に黒い長方形を表示しているSearchControllerでViewControllerを押す

Related 関連記事

  1. 1

    検索バーの横に画像を配置する方法

  2. 2

    一度に5つの結果のみを検索バーに表示する

  3. 3

    xamarinフォームの検索バーで検索アイコンを非表示にする方法

  4. 4

    特定のルートで検索バーを非表示にするAngular6

  5. 5

    リストのいくつかの項目を検索バーに表示する

  6. 6

    開始時に検索バーを非表示にする方法

  7. 7

    NSMenuItemに検索バーを表示する方法

  8. 8

    UISearchControllerの検索バーをプログラムで表示する

  9. 9

    iOS 7の場合、ユーザーが検索バーを下にスワイプするまで検索バーを非表示にします

  10. 10

    HTML検索バーに結果を表示するための新しいタブを開くようにする方法

  11. 11

    iOS8のナビゲーションバーに検索バーを表示する

  12. 12

    ホバー時に画像の上に画像を表示する方法

  13. 13

    ホバー時に画像の上に画像を表示する方法

  14. 14

    リストビューのスクロール時に検索バーを非表示にする

  15. 15

    検索結果を別のページに表示する方法

  16. 16

    SQL検索フォームの結果を表に表示する

  17. 17

    グーグル検索バーの下に表示されるのと同じ予測検索データを取得する方法

  18. 18

    ユーザー入力後に結果を表示するJavaScript検索バー

  19. 19

    アプリケーション メニューの検索バーを非表示にする Ubuntu 18.04 Gnome 3

  20. 20

    多くの画像を検索して表示するwpf

  21. 21

    検索ごとに検索結果を表示するこのビューページャーを更新する方法

  22. 22

    HTML:画像とビデオに透明なカバーを表示する

  23. 23

    他のViewControllerの検索バーとSearchDisplayControllerでデータを表示する方法

  24. 24

    検索バーのテキストを削除し、検索前に表示に戻ります。迅速

  25. 25

    検索バーが別の行に表示されるのはなぜですか?

  26. 26

    データバインドによるtd値検索から特定のデータを一覧表示します

  27. 27

    iOS 7を非表示にすると、検索バーが白くなります

  28. 28

    UISearchControllerの検索バーのキャンセルボタンを非表示にする

  29. 29

    検索バーの下に黒い長方形を表示しているSearchControllerでViewControllerを押す

ホットタグ

アーカイブ