【初心者向け】検索窓の中に虫眼鏡アイコンを設置する方法

どうも7noteです。検索ワードを入力するinput要素の中にアイコンをつける方法

Qiitaのように虫眼鏡アイコンをinput要素（テキストボックス）の中にいれる方法。

こんなやつ↓

※これは本当にqiitaをスクショしたので、細かい文字色や背景色などは再現しませんのでご注意。

アイコンをテキストボックスの中に置く方法

index.html

<div class="search_box">
  <input type="text" placeholder="ここにキーワード">
</div>

style.css

.search_box {
  display: inline-block; /* なくても大丈夫だけど、念の為 */
  position: relative;    /* 基準値とする */
}

.search_box::before {
  content: "";           /* 疑似要素に必須 */
  width: 16px;           /* アイコンの横幅 */
  height: 16px;          /* アイコンの高さ */
  background: url(./icon.png) no-repeat center center / auto 100%; /* 背景にアイコン画像を配置 */
  display: inline-block; /* 高さを持たせるためにインラインブロック要素にする */
  position: absolute;    /* 相対位置に指定 */
  top: 4px;              /* アイコンの位置。微調整してね */
  left: 5px;             /* アイコンの位置。微調整してね */
}

.search_box input {
  padding: 3px 0 3px 2em; /* アイコンを設置するため左の余白を多めに指定*/
}

結果

解説

input要素には疑似要素がつかえません。なのでinputと同じサイズの親要素を用意します。この親要素に対して疑似要素でアイコンを設置。position指定をして適切な位置に配置します。正確に上下中央に配置したい場合などはtop: 50%; transform: translateY(-50%);等を指定しましょう。

まとめ

簡単そうだけど、inputに疑似要素が使えないなどの知識がないと意外と沼にハマってしまいやすいいい例ですね。
疑似要素が使えない要素については過去に記事をまとめたのでよければこちらもご覧ください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ