（簡単）inputをクリックしたときの枠線の色を変える

フォームのコーディングの際によく使用するinput。

inputに文字を入力しようとクリックすると、以下の写真のように青線がつきます（ブラウザによって色は異なります）。

この色がサイト全体の色味を異なっているとき、違和感を感じますよね..

今回は、こちらの枠線の色の変更方法をご紹介します！

inputの枠線の色を変える方法

See the Pen by spiqa design (@spiqa_design) on CodePen.

このように、input:focusに好きな色を指定するだけです！
とても簡単ですね！

ちなみに、textareaなども同様の指定で変更することができますので、ぜひサイトにあった色味を指定してみてください！

フォームの入力エリアを角丸にしている場合もありますよね。
実際に角丸を指定してみましょう。

See the Pen outline by spiqa design (@spiqa_design) on CodePen.

inputは角丸になっているのですが、outlineは角丸を指定しているにもかかわらず、四角のままです。
outlineは角丸にできないのです..

とは言っても、角丸のエリアに四角の枠線がつくのはカッコ悪い！という場合、box-shadowを用いてoutlineらしきものを表示させることができます。

See the Pen by spiqa design (@spiqa_design) on CodePen.

フォームを実装する機会は多いので、フォーム部分のデザインにもこだわってコーディングを行いたいですね！

こちらもおすすめ

CSS

この記事をシェアする

HTMLのコメントアウトの書き方と注意点【初心者向け】

CSSだけで固定背景(パララックスデザイン)を実装する方法【iOS対応方法も紹介…