このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
CSS :enabled 擬似クラス
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
:enabled は CSS の擬似クラスで、すべての有効な要素を表します。有効な要素とは、アクティブ化(選択、クリック、入力など)したりフォーカスを得たりすることができるものです。要素には無効な状態、つまりアクティブ化したりフォーカスを得たりすることができない状態もあります。
試してみましょう
label {
display: block;
margin-top: 1em;
}
*:enabled {
background-color: gold;
}
<form>
<label for="name">名前:</label>
<input id="name" name="name" type="text" />
<label for="emp">在籍:</label>
<select id="emp" name="emp" disabled>
<option>No</option>
<option>Yes</option>
</select>
<label for="empDate">入社日:</label>
<input id="empDate" name="empDate" type="date" disabled />
<label for="resume">履歴書:</label>
<input id="resume" name="resume" type="file" />
</form>
構文
css
: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 /><br />
<input type="button" value="Submit" />
</form>
CSS
css
input:enabled {
color: #22bb22;
}
input:disabled {
color: #aaaaaa;
}
結果
[フレーム]
仕様書
| 仕様書 |
|---|
| HTML # selector-enabled |
| Selectors Level 4 # enabled-pseudo |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。