ITHACK

技術コンテンツ

CSS
No.10 :focus / フォーカスが当たっている状態
【CSS】:focus（擬似クラス） - フォーカスがあたっている状態

【CSS】:focus（擬似クラス） - フォーカスがあたっている状態

CSSの擬似クラス/focusについて解説します。

検証環境

focus

擬似クラス/focusは“フォーカスがあたっている状態を表す擬似クラス”です。

基本構文

:focus {
    プロパティ名: プロパティ値;
}

サンプル

入力項目をクリックし、フォーカスをあてると、テキストカラーを赤色にするサンプルです。

<style>
___ih_hl_start
input:focus {
___ih_hl_end
    color: red;
}
</style>

<input type="text" value="Text">

技術コンテンツ

CSS

前へ

:active / アクティブな状態

:active / アクティブな状態

次へ

:not / 非マッチの要素

:not / 非マッチの要素
【CSS】word-break - 単語中の改行
【コマンドライン】ユーザーのグループ確認 [ groups ]
【コマンドライン】ユーザー・グループの確認 [ getent ]
【JavaScript】イベントの伝搬 - キャプチャリング・バブリング
【JavaScript / DOM】属性ノードの取得・設定・削除 - 属性ノードを要素ノードで扱う方法
【JavaScript / DOM】ノード / textContentプロパティ - ノードのテキストを変更する
AtMarkRule
Browser
CentOS
Command
Command
CSS
Database
Development
DOM
Event
HTML
JavaScript
MarkupLanguage
MySQL
Network
OS
PHP
Programming
Property
Pseudo Class
Pseudo Element
Relational Database
Server
Standard Object
Tag