【CSS】入力フォームを選択した時にスタイルを変更する方法!

こんにちは!ラクです。

この記事では、inputなどの「入力フォーム」を選択した時に入力フォームのスタイルをCSSで変更する方法を紹介します!

入力フォームを選択した時にスタイルを変更する方法

さっそく結論から言ってしまいますが、セレクタに「:focus」を付けることで、簡単にスタイルを変更できます!

それでは、例をみてみましょう。

<input type="text">
input {
  width: 300px;
  height: 50px;
  border: none; /* デフォルトの外枠を消す */
  outline: none; /* 選択した時の謎の青線を消す */
  box-sizing: border-box;
  border: 3px solid gray;
}

input:focus {
  border-radius: 25px;
  border: 3px solid tomato;
}

さっきのコードでできた入力フォームを選択すると、、、

ちゃんと、選択したときのスタイルが適応されました!!

「:focus」を使うことができれば応用してオシャレな入力フォームも作れるので、是非自分好みにカスタマイズしてみてください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です