: bị vô hiệu hóa - Thủ thuật CSS

Anonim

Bộ :disabledchọn lớp giả cung cấp kiểu có điều kiện cho các phần tử HTML có thể nhận đầu vào của người dùng, khi các phần tử có disabledthuộc tính. Nó được định nghĩa trong thông số CSS Selectors Level 3 là “lớp giả trạng thái phần tử giao diện người dùng”, có nghĩa là nó được sử dụng để tạo kiểu nội dung dựa trên sự tương tác của người dùng với một phần tử đầu vào.

Các yếu tố đó có thể nhận được các disabledthuộc tính bao gồm , , , , . Có hai cú pháp hợp lệ để đặt thuộc tính này: hoặc disabled="disabled"hoặc (trong HTML5) chỉ đơn giản là disabledtừ khóa Boolean. Một phần tử bị vô hiệu hóa nếu nó không thể được kích hoạt (ví dụ: được chọn, nhấp vào hoặc chấp nhận nhập văn bản) hoặc chấp nhận tiêu điểm.

Một phần tử như vậy có thể được tạo kiểu bằng cách sử dụng :disabledbộ chọn lớp giả:

Kiểm tra cây bút này!

Điểm quan tâm

  • :disabledcó thể được “xâu chuỗi” với các bộ chọn giả khác: như :beforehoặc :afterđể tạo biểu tượng hoặc văn bản để cung cấp thêm phản hồi của người dùng.
  • Bất kỳ thuộc tính nào có thể được làm động bằng Chuyển tiếp CSS hoặc Hoạt ảnh sẽ được làm động đúng cách khi disabledthuộc tính được thêm hoặc xóa khỏi phần tử HTML.

Hỗ trợ trình duyệt

Trình duyệt Chrome Safari Firefox Opera I E Android iOS
Tất cả 3.1 Tất cả 9 9 Tất cả Tất cả