Hướng dẫn disable a style css - vô hiệu hóa một css kiểu

Question

Trang chủ
Tham khảo
CSS
CSS3
:disabled

Nội dung chính Show

Định nghĩa và sử dụng
Cấu trúc
Trình duyệt hỗ trợ
Định nghĩa và sử dụng
":disabled" chọn thành phần bị vô hiệu hóa (disabled), thường sử dụng cho các thành phần của form.
Cấu trúc
CSS viết:
Ta thấy những thành phần đang kích hoạt (disabled) đã được chọn.

Định nghĩa và sử dụng

":disabled" chọn thành phần bị vô hiệu hóa (disabled), thường sử dụng cho các thành phần của form.bị vô hiệu hóa (disabled), thường sử dụng cho các thành phần của form.

Cấu trúc

:disabled {
    property: value; 
}

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<input type="text" value="hoc web chuẩn" /><br />
<input type="text" value="" /><br />
<input type="text" value="hoc web chuẩn" disabled="disabled" />
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

CSS viết:

input:disabled{
    background: #ccc;
}

Hiển thị trình duyệt khi đã có css:

Ta thấy những thành phần đang kích hoạt (disabled) đã được chọn.

Trình duyệt hỗ trợ

":disabled" được hỗ trợ trong đa số các trình duyệt, ngoài trừ trình duyệt Internet Explorer 8 trở xuống.

The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.:disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

Try it

Syntax

Examples

This example shows a basic shipping form. It uses the JavaScript change event to let the user enable/disable the billing fields.

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

input[type="text"]:disabled {
  background: #ccc;
}

Định nghĩa và sử dụng

// Wait for the page to finish loading
document.addEventListener(
  "DOMContentLoaded",
  () => {
    // Attach `change` event listener to checkbox
    document.getElementById("billing-checkbox").onchange = toggleBilling;
  },
  false
);

function toggleBilling() {
  // Select the billing text fields
  const billingItems = document.querySelectorAll('#billing input[type="text"]');

  // Toggle the billing text fields
  billingItems.forEach((item) => {
    item.disabled = !item.disabled;
  });
}