:focus擬似クラスとは

  • 2020年4月21日
  • 2021年7月5日
  • HTML・CSS
  • 39view

はじめに

:focus擬似クラス
input:focus{ …..}みたいな使われ方をしていますね。

今日は:focus擬似クラスについて簡単に解説していきます。

:focus擬似クラスとは

そのクラスにユーザーがフォーカスした際のスタイルを指定できます。
フォームなどのインプットタグなどで、入力時だけ背景が変わる場合などが:focus擬似クラスの恩恵を受けている例です。

使用例:入力フォーム

こんな感じのよくある入力フォームですね。
ここで、入力を始めた時に、その要素の色が変わる様にしていきましょう。

サンプルコード

github:https://github.com/gunners6518/blog/tree/master/focus

<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<form action="cgi-bin/abc.cgi" method="post">
<p>お名前<br><input type="text" name="namae" size="30"></p>
<p>メール<br><input type="text" name="mail" size="30"></p>
<p>ご意見<br><input type="text" name="goiken" size="40"></p>
<p><input type="submit" value="送信する"></p>
</form>
</body>
</html>

//フォーカス時の背景を変更
<style>
input:focus {background-color:#ccffcc;}
</style>

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping