Loại đầu vào=bộ chọn CSS radio

Có hai cách tiếp cận để tạo kiểu hộp kiểm và nút radio bằng CSS. Đối với một cách đơn giản để khớp màu của các điều khiển tiêu chuẩn với thiết kế trang web của bạn, bạn có thể sử dụng thuộc tính

:root{
  accent-color : #696;
}

4. Để kiểm soát hoàn toàn thiết kế hộp kiểm và nút radio, bạn có thể sử dụng thuộc tính

:root{
  accent-color : #696;
}

5 để tắt kiểu dáng tiêu chuẩn của chúng và triển khai kiểu dáng của riêng bạn

Đặt màu nhấn

Thuộc tính

:root{
  accent-color : #696;
}

4 đặt màu được sử dụng bởi các hộp kiểm và nút radio, cũng như các trường phạm vi và chỉ báo tiến trình. Màu nhấn được kế thừa, vì vậy chỉ cần đặt ở thư mục gốc của tài liệu

1
2
3

:root{
  accent-color : #696;
}

Thuộc tính

:root{
  accent-color : #696;
}

4 hiện được Firefox, Chrome và Edge hỗ trợ và sẽ được hỗ trợ trong phiên bản tiếp theo của Safari. Các hộp kiểm và nút radio này được tạo kiểu bằng cách sử dụng

:root{
  accent-color : #696;
}

4

Một thiết kế hoàn toàn tùy chỉnh

Thiết kế hộp kiểm và nút radio được tạo kiểu bằng thuộc tính

:root{
  accent-color : #696;
}

4 khác nhau giữa các trình duyệt và hệ điều hành và có thể không hoạt động tốt với phần còn lại của thiết kế trang web của bạn. Thay vào đó, bạn có thể sử dụng thuộc tính

:root{
  accent-color : #696;
}

5 để vô hiệu hóa kiểu dáng tiêu chuẩn và thực hiện một thiết kế hoàn toàn tùy chỉnh, như các hộp kiểm và nút radio này.

Tạo các hộp

Đầu tiên, chúng tôi tạo kiểu cho trạng thái mặc định của các điều khiển (đã bật, nhưng không hoạt động, tập trung hoặc đã chọn)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

:root{
  accent-color : #696;
}

0

Dòng 2 và 3 vô hiệu hóa kiểu dáng tiêu chuẩn bằng cách đặt thuộc tính

:root{
  accent-color : #696;
}

5 thành

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

2 (thuộc tính

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

3 là cần thiết cho Safari)

Dòng 4 và 5 đặt kích thước của các điều khiển. Mặc dù chúng tôi thường sử dụng các đơn vị tương đối để chia tỷ lệ các điều khiển giao diện người dùng dựa trên kích thước văn bản, đối với các hộp kiểm và nút radio, điều này có thể dẫn đến các điều khiển quá nhỏ hoặc quá lớn, vì vậy chúng tôi sử dụng kích thước cố định hợp lý thay vào đó. Lưu ý rằng chúng tôi đang giả sử sử dụng kích thước hộp viền, vì vậy các kích thước này bao gồm chiều rộng đường viền

Dòng 6 và 7 căn chỉnh các điều khiển với văn bản nhãn của chúng. Riêng thuộc tính

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

4 không đủ chính xác, vì vậy chúng tôi kết hợp thuộc tính này với một lề ở trên cùng bằng một nửa chiều cao của dòng (ở đây là

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

5) trừ đi một nửa chiều cao của tiện ích con, điều này sẽ căn giữa các điều khiển trong dòng. Chúng tôi cũng thêm một số lề ở bên phải để tạo thêm khoảng trống giữa điều khiển và nhãn của nó

Các dòng 8, 9 và 14 đặt đường viền của các điều khiển. Các hộp kiểm được cung cấp các góc hơi tròn, trong khi các nút radio được làm hình tròn. Dòng 10 đặt nền, bao gồm cả vị trí của hình ảnh mà chúng tôi sẽ thêm sau

Trạng thái hoạt động và tập trung

Tiếp theo, chúng tôi tạo kiểu cho các trạng thái hoạt động và tập trung, điều cần thiết cho khách truy cập sử dụng bàn phím để tương tác với các trang web

:root{
  accent-color : #696;
}

6

:root{
  accent-color : #696;
}

7

Sự thay đổi màu đường viền cho biết rõ yếu tố đang hoạt động hoặc tiêu điểm, vì vậy chúng tôi có thể tắt đường viền mặc định. Lưu ý rằng chúng tôi thêm

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

6 vào bộ chọn

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

7 vì nếu không, các điều khiển bị vô hiệu hóa sẽ hiển thị là đang hoạt động khi giữ chuột trên chúng

trạng thái bị vô hiệu hóa

Tiếp theo, chúng tôi tạo kiểu cho trạng thái bị vô hiệu hóa bằng cách tô xám các điều khiển

:root{
  accent-color : #696;
}

0

:root{
  accent-color : #696;
}

1

trạng thái đã kiểm tra

Cuối cùng, chúng tôi tạo kiểu cho trạng thái đã chọn bằng cách sử dụng hình nền

:root{
  accent-color : #696;
}

2____23

Bạn có thể tải xuống hộp kiểm. svg (148 byte) và đài phát thanh. svg (137 byte) để sử dụng trên trang web của riêng bạn

Mã hoàn thành

Kết hợp tất cả các điều trên dẫn đến mã hoàn thành

:root{
  accent-color : #696;
}

0

:root{
  accent-color : #696;
}

1

Chia sẻ kiểu dáng với các điều khiển đầu vào khác

Các điều khiển đầu vào khác thường chia sẻ các yếu tố trong thiết kế của chúng — chẳng hạn như đường viền và kiểu đang hoạt động, tiêu điểm và bị vô hiệu hóa — với các hộp kiểm và nút radio

Trong trường hợp này, kiểu dáng được chia sẻ có thể được đặt cho tất cả các điều khiển (dòng 1 đến 18), giảm số lượng kiểu dáng bổ sung cần thiết cho hộp kiểm và nút radio (dòng 20 đến 39)

Làm cách nào để nhắm mục tiêu đầu vào radio trong CSS?

Đài phát thanh loại đầu vào là gì?

Làm cách nào để chỉ chọn một nút radio trong CSS?

Làm cách nào để áp dụng CSS trên nút radio trong HTML?