: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.
:enabled là lớp giả trong CSS đại diện cho bất kỳ phần tử nào được bật. Một phần tử được bật nếu nó có thể được kích hoạt (chọn, nhấp vào, gõ vào, v.v.) hoặc nhận tiêu điểm. Phần tử cũng có trạng thái bị vô hiệu hóa, trong đó nó không thể được kích hoạt hoặc nhận tiêu điểm.
Try it
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>
Cú pháp
css
:enabled {
/* ... */
}
Ví dụ
Ví dụ sau làm cho màu của văn bản và các thẻ <input> kiểu button có màu xanh lá khi được bật, và màu xám khi bị vô hiệu hóa. Điều này giúp người dùng hiểu được những phần tử nào có thể tương tác.
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;
}
Kết quả
Đặc tả
| Specification |
|---|
| HTML # selector-enabled |
| Selectors Level 4 # enabled-pseudo |