「CSS」擬似クラス:focusでフォーカスを持つ要素のサンプル

2021年9月8日

書式
.クラス名:focus{xxx}
:focus は CSS の 擬似クラスで、フォーカスを持っている (フォームの入力のような) 要素を表します。普通はユーザーが要素をクリックやタップをしたり、キーボードの［タブ］キーで選択したりしたときです。
使用例

<style>
/*:focusを持つ要素cssの定義*/
 /*背景色が黄色、文字が赤*/
.input-red:focus {
  background: yellow;
  color: red;
}
/*背景色が黄色、文字が青*/
.input-blue:focus {
  background: yellow;
  color: blue;
}
</style>
<body>
  <input class="input-red" value="フォーカスすると赤くなる">
  <br>
  <br>
  <input class="input-blue" value="フォーカスすると青くなる">
</body>

 

CSS

Posted by arkgame