【初心者でもわかる】選択中の入力フォームに装飾を入れる

4168 ワード
CSS フォーム 初心者 HTML HTML テキストリンク

どうも7noteです。選択中の入力フォームにCSSを当てる方法

現在選択されているフォームに装飾をいれます。

使うのはこちら↓

:focus

擬似クラス:focusを使えばCSSで装飾を入れることができます。

↓↓ちょっとゲームチックにすることも可能！！↓↓

使い方

index.html
<form>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text">
</form>
style.css
input:focus {
  background: #fcc;
}

まとめ

装飾をがんばればゲーム画面のような装飾も可能！
オリジナルの入力フォームを作ってみてください。

style.css
form {
  background: radial-gradient(circle farthest-side, #1F6C85, #0A3C5A, #07334F); /* 
円形グラデーション */
  padding: 20px;
}

input {
  width: 100%;
  color: #fff;
  background: none;
  border: none;
  caret-color: transparent;   /* デフォルトの点滅カーソルを非表示 */
}

input:focus {
  outline: none;
  background: linear-gradient(to top, #1D81C4, transparent);
}

（カーソル、指にしておけばよかった・・・）

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ