CSS

2021.07.13

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

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

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

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

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

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

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

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

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

outlineの注意点

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

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

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

outlineを角丸にしたい場合

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

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

まとめ

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

こちらもおすすめ

関連記事

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

  • 2021.08.03

    【コピペOK】パンくずリストの設置方法(便利なプラグインも紹介)

    CSS

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

おすすめ記事

  • 2021.08.11

    初心者必見!最初に読んでおきたいgoogleアナリティクスのおすすめ書籍

    その他

  • 2021.09.14

    【薄くて軽い!】超おすすめパソコンスタンド

    その他

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!