:enabled
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Please take two minutes to fill out our short survey.
: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 |