本記事はプロモーションを含みます

inputタグのCSSに「:focus」を使用時に出る青色の枠を消す方法

eyecatch_626

問題点

626-001

HTMLのinputタグのCSSに「:focus」を使用したところ、文字を入力しようとすると、青色や黒色の枠がChromeなどで出てきており、デザイン上その枠を消したい。

解決方法

input:focus {
    outline: none;
}

このように、inputの「:focus」に「outline: none;」を入れると枠が表示されなくなります。

626-002

注意点

inputの「:focus」に「outline: none;」を入れることに関しては、input入力の視覚的な見え方がかなり低下をし、弱視の方が認識できなくなる可能性があります。個人の趣味のブログであれば、問題ありませんが、コーポレートサイトなどにおいては、弱視の方をページから使いにくい対策を企業として行っていますので、対面上非常に良くないサイトとしての印象を持たれます。業種によっては、企業寿命を縮める要因になる可能性があります。

太陽光の下の屋外で画面を見ても、すべての人がきっちり見えるように、文字や背景色の色味がしっかりわかれているなどの対策をしませんと、「outline: none;」をすることはデメリットしかありません。
詳細は、W3Cの下記サイトに掲載されておりますので、ご確認ください。

SEO関係に関して、この記事を記載時には問題がなさそうですが、Googleが検索結果にCore Web Vitalsを導入した後は、このような内容も対象になる可能性がありますので、注意が必要です。

:focusの他の命令文に関して

「outline: none;」を使うには、前期にしましたが、文字や背景色に工夫がいります。よく使いそうな命令文は次のようになります。

枠を他の色に変更する

input:focus {
    outline: 1px #ff0000 dashed;
}

枠を消すのではなく、変更してデザインに合うようにする。基本的によく使う、borderと同じく、順番に、「太さ、色、スタイル」になっています。
スタイルはでよく使うのが、solid（実線）、double（２重の線）、dashed（破線）となります。

背景色を変更する

input:focus {
    background: #ff0000;
}

この場合は、文字入力時の背景が赤色になります。

文字の色を変更する

input:focus {
    color: #ff0000;
}

この場合は、文字入力時の文字の色が赤色になります。

問題が解決したら、お友達と共有しませんか？

この記事にいっぱいおごってみる？

KOBE WINGのAmazonほしい物リスト

オススメ記事

WordPressHTML,CSS

Posted by KobeWing