Hình vuông nút radio CSS

Các hộp kiểm và radio mặc định của trình duyệt được thay thế bằng sự trợ giúp của

  
  
    Indeterminate checkbox
  

7, một loạt các lớp cho cả hai loại đầu vào giúp cải thiện bố cục và hành vi của các phần tử HTML của chúng, mang lại khả năng tùy chỉnh cao hơn và tính nhất quán giữa các trình duyệt. Các hộp kiểm dùng để chọn một hoặc một số tùy chọn trong danh sách, trong khi radio dùng để chọn một tùy chọn từ nhiều tùy chọn

Về mặt cấu trúc, các

  
  
    Indeterminate checkbox
  

8 và

  
  
    Indeterminate checkbox
  

8 của chúng ta là các phần tử anh em trái ngược với một

  
  
    Indeterminate checkbox
  

8 trong một

  
  
    Indeterminate checkbox
  

8. Điều này dài dòng hơn một chút vì bạn phải chỉ định các thuộc tính

  
  
    Disabled checkbox
  


  
  
    Disabled checked checkbox
  

2 và

  
  
    Disabled checkbox
  


  
  
    Disabled checked checkbox
  

3 để liên kết giữa

  
  
    Indeterminate checkbox
  

8 và

  
  
    Indeterminate checkbox
  

8. Chúng tôi sử dụng bộ chọn anh chị em [

  
  
    Disabled checkbox
  


  
  
    Disabled checked checkbox
  

6] cho tất cả các tiểu bang

  
  
    Indeterminate checkbox
  

8 của chúng tôi, như

  
  
    Disabled checkbox
  


  
  
    Disabled checked checkbox
  

8 hoặc

  
  
    Disabled checkbox
  


  
  
    Disabled checked checkbox
  

  

9. Khi kết hợp với lớp

  
  
    Indeterminate checkbox
  

30, chúng ta có thể dễ dàng định kiểu văn bản cho từng mục dựa trên trạng thái của

  
  
    Indeterminate checkbox
  

8

Kiểm tra của chúng tôi sử dụng các biểu tượng Bootstrap tùy chỉnh để biểu thị trạng thái đã kiểm tra hoặc không xác định

Séc

  
  
    Indeterminate checkbox
  

5

không xác định

Các hộp kiểm có thể sử dụng lớp giả

  
  
    Indeterminate checkbox
  

32 khi được đặt thủ công qua JavaScript [không có thuộc tính HTML khả dụng để chỉ định nó]

  
  
    Indeterminate checkbox
  

Vô hiệu hóa

Thêm thuộc tính

  
  
    Indeterminate checkbox
  

33 và các

  
  
    Indeterminate checkbox
  

8 được liên kết sẽ tự động được tạo kiểu để phù hợp với màu nhạt hơn để giúp biểu thị trạng thái của đầu vào

  
  
    Disabled checkbox
  


  
  
    Disabled checked checkbox
  

bộ đàm

  
  
    Indeterminate checkbox
  

3

Vô hiệu hóa

Thêm thuộc tính

  
  
    Indeterminate checkbox
  

  

33 và các

  
  
    Indeterminate checkbox
  

8 được liên kết sẽ tự động được tạo kiểu để phù hợp với màu nhạt hơn để giúp biểu thị trạng thái của đầu vào

  
  
    Indeterminate checkbox
  

4

công tắc

Một công tắc có đánh dấu hộp kiểm tùy chỉnh nhưng sử dụng lớp

  
  
    Indeterminate checkbox
  

37 để hiển thị một công tắc bật/tắt. Công tắc cũng hỗ trợ thuộc tính

  
  
    Indeterminate checkbox
  

33

  
  
    Indeterminate checkbox
  

7

Mặc định [xếp chồng]

Theo mặc định, bất kỳ số lượng hộp kiểm và radio nào là anh chị em trực tiếp sẽ được xếp chồng lên nhau theo chiều dọc và cách nhau một cách thích hợp bằng

  
  
    Indeterminate checkbox
  

7

  
  
    Indeterminate checkbox
  

9

  
  
    Indeterminate checkbox
  

0

nội tuyến

Nhóm các hộp kiểm hoặc radio trên cùng một hàng ngang bằng cách thêm

  
  
    Indeterminate checkbox
  

40 vào bất kỳ

  
  
    Indeterminate checkbox
  

7 nào

  
  
    Indeterminate checkbox
  

  

3

  
  
    Indeterminate checkbox
  

3

không có nhãn

Bỏ qua gói

  
  
    Indeterminate checkbox
  

7 cho các hộp kiểm và radio không có văn bản nhãn. Hãy nhớ vẫn cung cấp một số dạng tên có thể truy cập cho các công nghệ hỗ trợ [ví dụ: sử dụng

  
  
    Indeterminate checkbox
  

43]. Xem phần khả năng truy cập tổng quan về biểu mẫu để biết chi tiết

  
  
    Indeterminate checkbox
  

0

Chuyển đổi các nút

Tạo các hộp kiểm và nút radio giống như nút bằng cách sử dụng kiểu

  
  
    Indeterminate checkbox
  

44 thay vì kiểu

  
  
    Indeterminate checkbox
  

30 trên các phần tử

  
  
    Indeterminate checkbox
  

8. Các nút chuyển đổi này có thể được nhóm lại trong một nhóm nút nếu cần

Các nút chuyển đổi hộp kiểm

  
  
    Indeterminate checkbox
  

1

  
  
    Indeterminate checkbox
  

2

  
  
    Indeterminate checkbox
  

3

Về mặt trực quan, các nút chuyển đổi hộp kiểm này giống hệt với các nút chuyển đổi plugin nút. Tuy nhiên, chúng được truyền đạt khác nhau bởi các công nghệ hỗ trợ. các nút chuyển đổi hộp kiểm sẽ được trình đọc màn hình thông báo là "đã chọn"/"không được kiểm tra" [vì mặc dù có vẻ ngoài như vậy nhưng về cơ bản chúng vẫn là các hộp kiểm], trong khi các nút chuyển đổi plugin nút sẽ được thông báo là "nút"/"đã nhấn nút". Lựa chọn giữa hai cách tiếp cận này sẽ tùy thuộc vào loại chuyển đổi mà bạn đang tạo và việc chuyển đổi đó có ý nghĩa với người dùng hay không khi được thông báo dưới dạng hộp kiểm hoặc nút thực tế