:disabled
试试看
语法
css
:disabled {
/* ... */
}
示例
此示例显示了一个基本的送货表单。它使用 JavaScript change
事件允许用户启用/禁用账单字段。
HTML
html
<form action="#">
<fieldset id="shipping">
<legend>Shipping address</legend>
<input type="text" placeholder="Name" />
<input type="text" placeholder="Address" />
<input type="text" placeholder="Zip Code" />
</fieldset>
<br />
<fieldset id="billing">
<legend>Billing address</legend>
<label for="billing-checkbox">Same as shipping address:</label>
<input type="checkbox" id="billing-checkbox" checked />
<br />
<input type="text" placeholder="Name" disabled />
<input type="text" placeholder="Address" disabled />
<input type="text" placeholder="Zip Code" disabled />
</fieldset>
</form>
CSS
css
input[type="text"]:disabled {
background: #ccc;
}
JavaScript
单击复选框时切换禁用输入字段。
js
const checkbox = document.querySelector("#billing-checkbox");
const billingItems = document.querySelectorAll('#billing input[type="text"]');
checkbox.addEventListener("change", () => {
billingItems.forEach((item) => {
item.disabled = !item.disabled;
});
});
结果
选中/取消选中复选框以更改账单字段的样式。
规范
规范 |
---|
HTML 标准 # selector-disabled |
选择器级别 4 # enableddisabled |
浏览器兼容性
BCD 表格仅在浏览器中加载