chromeブラウザで、お問い合わせフォームとか、例えば下のようなサイト内検索を利用する時、あるじゃないですか。

【よくある検索フォーム】

それで、入力エリアをクリックするじゃないですか。

すると、下のようにオレンジ色っぽい枠が出るじゃないですか。

【フォーカスすると、なんだかオレンジ色っぽい枠が・・・】

これがあることで、もしかしたら作っているサイトのデザインによっては、ダサく見えてしまうこともあると思いますので、cssでこのオレンジ色っぽい枠を取り除きましょう。

まずはじめに

検索フォーム部分のhtmlを確認します。

(WordPressのTwenty Twelveテーマの「検索」ウィジェットを参考にしました)

【検索フォーム部分のhtml】

<div>
 <label class="screen-reader-text" for="s">検索:</label>
 <input type="text" value="" name="s" id="s" />
 <input type="submit" id="searchsubmit" value="検索" />
</div>

続いて、cssを書きます。

CSSでオレンジ色っぽい枠を消す

cssは、以下のように書きます。

【css】

input:focus{
 outline:none;
}

上記でOKです。が、もうちょっと広げてinputタグのタイプごとに指定することもできます。

たとえば、フォームの入力エリアのhtmlは「<input type=”text” ・・・>」なので、

「type=”text”」だけ、適用したいとします。すると、下のように書きます。

【type=”text”だけに適用させる】

input[type="text"]:focus{
 outline:none;
}

細かいことですけど、あらかじめ指定しておくといいと思います。