このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
: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 name="name" type="text" /> <label for="emp">Employed:</label> <select name="emp" disabled> <option>No</option> <option>Yes</option> </select> <label for="empDate">Employment Date:</label> <input name="empDate" type="date" disabled /> <label for="resume">Resume:</label> <input name="resume" type="file" /></form>構文
:enabled
例
以下の例は有効なときに文字列の色とボタンの<input> を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。
HTML
html
<form action="url_of_form"> <label for="FirstField">First field (enabled):</label> <input type="text" value="Lorem" /><br /> <label for="SecondField">Second field (disabled):</label> <input type="text" 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 |