:enabled
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
:enabled は CSS の擬似クラスで、すべての有効な要素を表します。有効な要素とは、アクティブ化 (選択、クリック、入力など) したりフォーカスを得たりすることができるものです。要素には無効な状態、つまりアクティブ化したりフォーカスを得たりすることができない状態もあります。
css
/* 有効な <input> を選択 */ input:enabled { color: blue; } 試してみましょう
label { display: block; margin-top: 1em; } *:enabled { background-color: gold; } <form> <label for="name">Name:</label> <input id="name" name="name" type="text" /> <label for="emp">Employed:</label> <select id="emp" name="emp" disabled> <option>No</option> <option>Yes</option> </select> <label for="empDate">Employment Date:</label> <input id="empDate" name="empDate" type="date" disabled /> <label for="resume">Resume:</label> <input id="resume" name="resume" type="file" /> </form> 構文
:enabled
例
以下の例は有効なときに文字列の色とボタンの <input> を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。
HTML
html
<form action="url_of_form"> <label for="FirstField">First field (enabled):</label> <input type="text" id="FirstField" value="Lorem" /><br /> <label for="SecondField">Second field (disabled):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled" /><br /> <input type="button" value="Submit" /> </form> CSS
css
input:enabled { color: #2b2; } input:disabled { color: #aaa; } 結果
仕様書
| Specification |
|---|
| HTML # selector-enabled |
| Selectors Level 4 # enabled-pseudo |
ブラウザーの互換性
Loading…