以前に入力フォームの「placeholder」についての記事を書きましたが、今回もフォーム関連で、入力項目のフォーカス時にChromeで自動表示される枠線を消す方法を解説します。
実際はChrome以外でも枠線が出るブラウザがあります。
枠線が出るブラウザは「input」などの枠線を「outline」プロパティで表示させています。
そのため、CSSで「outline: none;」を指定します。
記述すると下記のようになります。
CSS
input:focus, textarea:focus {outline: none;}
1行のテキスト入力欄と、テキストエリアのフォーカス時に自動表示の枠線が消されます。
ある意味リセットのようなもので、後は自分で装飾したCSSを反映させてあげましょう。