CSS :focus Selector
例
フォーカスが得られたら、入力フィールドを選択してスタイルを設定します。
input:focus
{
background-color: yellow;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
:focus
セレクターは、フォーカスのある要素を選択するために使用されます。
ヒント:: focusセレクターは、キーボードイベントまたはその他のユーザー入力を受け入れる要素で使用できます。
バージョン: | CSS2 |
---|
ブラウザのサポート
表の数字は、セレクターを完全にサポートする最初のブラウザーのバージョンを示しています。
Selector | |||||
---|---|---|---|---|---|
:focus | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS構文
:focus {
css declarations;
}
その他の例
例
<input type = "text">にフォーカスが移ったら、幅を100pxから250pxに徐々に変更します。
input[type=text] {
width: 100px;
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
関連ページ
CSSチュートリアル:CSS疑似クラス