このテーブルを完成させ、検索機能を追加しました。しかし、検索バーには、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-position
しleft center
て設定background-size
します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加