2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
フォームのコーディングの際によく使用する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.
フォームを実装する機会は多いので、フォーム部分のデザインにもこだわってコーディングを行いたいですね！
こちらもおすすめ
RECOMMEND
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/