inputタグによってできる枠線を消したい

Question

前提・実現したいこと

Webサイトを作成しているのですが、サイト内検索機能としてこの画像のようなものを載せたいと考えています。

虫眼鏡の部分は、labelタグに虫眼鏡の画像を挟んで、この虫眼鏡部分をクリックすることでも、入力欄に入力できる状態になるようにしようと考えています。

実際に入力してみた画像がこちらになります。

今回の質問では、この画像の検索結果の候補（画像のクア,MALAYSIAの宿泊先）まで出るようにしようとは考えていませんが、それ以外の部分はこれと見た目は同じように作成できればなと考えております。

ちなみに、これらの画像の元のページはこちらです。
https://www.airbnb.jp/gift

開発者ツールを利用したのですが、中身が今の自分にとってかなり難解で解読することができませんでした。
もう少しシンプルなコードでこの検索欄は作成することが可能だと思いました。
その比較的シンプルなコードを知りたいと思い、こちらで質問させていただきました。
よろしくお願いいたします。

試したこと

<div id="search_section">
  <label for="search_homepage">
    <img src="img/magnifying_glass.png" class="magnifying_glass">
  </label>
  <input type="search" name="search" placeholder="探す" id="search_homepage">
</div>

#search_section{
  border: 1px solid #444;
  width: 200px;
}
#search_homepage{
  border: solid 0;
}
#search_homepage:active{
  border: solid 0;
}

このようにして、素の状態は一番上の画像のような見た目にできたのですが、虫眼鏡画像や入力欄をクリックして入力できる状態にすると、
→ #search_homepage:active{border: solid 0;}
で消したままにしようとした枠が復活してしまいました。
ここで復活してしまう内側の枠を消したままにできればいいのですが……

Comments

[yoshinavi]

＞枠が復活してしまいました。

→　水色の枠は「border」に見えますが、これは「border」ではありません。
「x_x」さんの回答にある、「:focus」「outline」を調べられると良いかと思います。

[nsmt]

「x_x」さんの回答に加え、より詳しい説明ありがとうございます！
borderじゃなくてoutlineプロパティなんですね
勉強になりました

Answer 1

Chrome の UAスタイルシートに

:focus {
    outline: -webkit-focus-ring-color auto 1px;
}

とあるので打ち消すように書けばいいです。

#search_homepage:focus {
  outline-style: none;
}

Comments

[nsmt]

UAスタイルシートというものの存在を初めて知りました！
けっこう色んなことが自動で決まっているのですね。
教えていただいた通り、「outline-style: none;」でfocus時に出てくる枠線を消すことができました！
ありがとうございます。