検索フォームの虫眼鏡アイコンをcssのみで作成

検索フォームにルナフェスって打ったら「ルナフェス 図面」って出てくるのわらう
❤婚活パーティ(青森)●2/18(日)14時~『お互い結婚前提~30&40代編』~30&40代で結婚前提でお付合いしたい方が集まるパーティです。男女30-45歳。リンクモア平安閣。応募/メールフォーム。※詳しくは『あおもり交流会』でHP検索☆彡
髪いじるのになんかいいのないかなーって画像検索よくするんだけど毎回工程数少な過ぎて2と3の間で何が起きたってくらいトランスフォームするのほんとつらい。わたしは過程が知りたいんです。
冒頭数分見た時点で異常事態を感じ取り、「グレンラガン 4話」ってグーグルの検索フォームに打ち込んだら「作画」ってサジェストされたからすべてを察して心を無にして見た
探してるイメージの曲とか詳細が知りたい動画のBGMがないから、DOVA以外のフリー素材サイト見てるんだけど、やっぱりDOVAの検索フォームはめちゃくちゃよく出来てる
某フリマサイトの成人向け薄い本を成人向けだと消して出品してるやつ、違反報告しても事務局全然対応しないから直接URLコピーして問い合わせフォームから通報すると対応してもらえたっぽい・・検索したら消えてるから地獄から救われたって感じ

searchForm.png

擬似要素のbeforeで虫眼鏡の円を、afterで右下の線を書いています。

<div class="searchForm">
 <input class="searchForm-input" type="text">
 <button class="searchForm-submit" type="submit"></button>
</div>
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #999;
  border-radius: 5px;
  padding: 10px;
  margin: 5px 0;
}
.searchForm {
  position: relative;
}
.searchForm-input {
  width: 100%;
}
.searchForm-submit {
  position: absolute;
  right: 0;
  top: calc(50% - 19px);
  width: 38px;
  height: 38px;
  border-radius: 0 4px 4px 0;
  background: #999;
}
.searchForm-submit::before {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
  position: absolute;
  top: calc(50% - 9px);
  left: calc(50% - 9px);
}
.searchForm-submit::after {
  content: '';
  width: 8px;
  height: 6px;
  position: absolute;
  top: calc(50% + 6px);
  left: calc(50% + 2px);
  border-top: solid 2px #fff;
  transform: rotate(45deg);
}

[紹介元] CSSタグが付けられた新着投稿 – Qiita 検索フォームの虫眼鏡アイコンをcssのみで作成

  • コメント

    1. 匿名希望
      2018/01/17(水) 14:31:49

      検索フォームにルナフェスって打ったら「ルナフェス 図面」って出てくるのわらう

    2. 匿名希望
      2018/01/17(水) 14:31:49

      ❤婚活パーティ(青森)●2/18(日)14時~『お互い結婚前提~30&40代編』~30&40代で結婚前提でお付合いしたい方が集まるパーティです。男女30-45歳。リンクモア平安閣。応募/メールフォーム。※詳しくは『あおもり交流会』でHP検索☆彡

    3. 匿名希望
      2018/01/17(水) 14:31:49

      髪いじるのになんかいいのないかなーって画像検索よくするんだけど毎回工程数少な過ぎて2と3の間で何が起きたってくらいトランスフォームするのほんとつらい。わたしは過程が知りたいんです。

    4. 匿名希望
      2018/01/22(月) 21:01:58

      冒頭数分見た時点で異常事態を感じ取り、「グレンラガン 4話」ってグーグルの検索フォームに打ち込んだら「作画」ってサジェストされたからすべてを察して心を無にして見た

    5. 匿名希望
      2018/01/22(月) 21:01:58

      探してるイメージの曲とか詳細が知りたい動画のBGMがないから、DOVA以外のフリー素材サイト見てるんだけど、やっぱりDOVAの検索フォームはめちゃくちゃよく出来てる

    記事に戻る

関連記事