【アメブロカスタマイズ】検索ボックス入力中の太い枠線を表示しない方法

アメブロの検索ボックスに文字を入力する時(フォーカス時)、検索ボックスの周りに太くて目立つ枠線(輪郭線、アウトライン)が表示されます。

最近のブラウザではこの輪郭線の表示がデフォルトなのでしょうか。最近色んなサイトで見られるように思います。

この輪郭線、入力中であることがわかりやすいですし、文字を入力する時以外は表示されませんので、気にならない場合が多いと思います。

しかし、表示された時はかなり主張が強いので、時にはデザイン的に邪魔と感じる場合もあるのではないでしょうか。

そこで、当記事では、文字入力中(フォーカス時)でも検索ボックスの周りにこのような輪郭線が表示されないようにするカスタマイズ方法をご紹介します。

CSSを編集してカスタマイズしますので、やり方がわからない場合はまずこちらからチェックしておいて下さい。

輪郭線を出さないやり方は簡単で、以下のコードをCSSの末尾に追加するだけです。

/* 検索ボックス入力中の太い枠線を表示しない */
input.js-searchInput:focus {
  outline: none;
}

これで、入力中も検索ボックスの周りに太くて目立つ輪郭線が表示されくなると思います。

よかったら参考にして下さい。