ブラウザのデフォルトCSSで表示されるinput要素フォーカス時のデザインを変える。

2017年03月12日
Sponsored Link

SafariGoogle chromeといったブラウザでは、input要素にフォーカスすると、次の画像のように入力エリアのまわりにもやっとした影が表示されます。

webkit

これはブラウザ毎に定義されているデフォルトのCSS(user agent stylesheet)によるものです。

ですから、Microsoftのブラウザ(EdgeやInternet Explorer)だとデフォルトのCSSが違うため影は表示されません。

microsoft

このようなブラウザ間で生じる表示の差異はコーディング前にリセットCSSで打ち消しますが、WEB制作者が全て設定していたら大変なんで、inputフォーカス時のstylesheetまで打ち消すことはあまりありません。

もちろん代表的なリセットCSSでも打ち消さずに残しています。

【代表的なリセットCSS】
CSS Reset – YUI Library
HTML5 Reset Stylesheet | HTML5 Doctor
Normalize.css: Make browsers render all elements more consistently

input要素フォーカス時の影をcssで上書きする方法

EdgeやIEでもSafariやGoogle chromeのようにフォーカス状態が分かりやすいようにカスタマイズしてみます。

まずはsafariやGoogle chromeで表示されるもやっとした影をリセットします。この影はoutlineプロパティで指定されているので、「outline:none」でリセットします。

input:focus {
  outline:none;
}

outlineプロパティを非表示にしたので、入力エリアまわりの影はbox-shadowプロパティを使って表現します。

box-shadowは水平方向の影と垂直方向の影のオフセット距離を0にすれば、全方向に影が拡がります。

border-colorはデザイン調整で指定しています。

input:focus {
  outline:0;
  border-color: #e6b422;
  box-shadow:0px 0px 10px #DAA520;
}

これで、input要素フォーカス時の差異はリセットされ、次の画像のようにデザインカスタマイズ完了です。

css

follow us in feedly

関連記事

福岡のウェブデザイン事務所「ハブワークス」

HP作成・リニューアルは福岡のハブワークスまでお気軽にお問い合わせください。ウェブサイト公開後の修正・更新もお任せください。フリーランスだからできるリーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ