はじめに

入力フォームを作成していて、特に問題はないのですが、デフォルトで入力しようとした時に、クリックすると変な青い枠線が出てくるんですよね。

非常に気になる。。。

今回はその枠線消す方法を調べたので残しておきたいと思います。
よろしくお願いします。

修正したいこと

文字じゃ伝わりにくいかもしれないので、私のオリジナルアプリで状況をお伝えします。
このような入力フォームがあるとします。↓

これをですね、入力しようと思ってクリックすると↓

こんなふうに青い枠線が出てきます。
なんかめっちゃ気になったんですよね。

これはデフォルトでinput要素やtextarea要素についているoutlineというプロパティの影響らしいです。

outlineて何ぞ！？笑

って感じでしたが、inputやtextarea, select要素などに使用するとフォーカス状態の時に輪郭線を指定できるプロパティらしいです。

今回はこいつがいらないのでnoneで消しちゃいます。

input,
textarea {
  outline:none;
}

これだけ。
ちゃんと枠線が消えました！

outlineは使ったことなかったのですが、クライアントとしてwebサービスを使っている時はそういえばなんか青い線出てくるなと思いました。

状況に応じて必要ない時は消せるのですね。