Lớp :optionalgiả nhắm mục tiêu các đầu vào (bao gồm cả các) không được đặt cụ thể là required(không có requiredthuộc tính).
Điều này có thể hữu ích khi bạn muốn cung cấp cho các trường tùy chọn một giao diện cụ thể, có thể ít hiển thị hơn các trường bắt buộc.
Cú pháp
input(type=text):optional ( border: 1px solid #eee; )Bản giới thiệu
Trong bản demo sau, trường tùy chọn (“Tên”, “Giới tính” và “Châu lục”) có độ mờ giảm xuống 40% để người dùng có thể biết ngay đâu là các trường bắt buộc. Trong trường hợp này, "Email". Khi được di chuột qua, một đầu vào tùy chọn sẽ thấy độ mờ trở lại 100%.
Các optionalhoạt động trên tất cả các loại phần tử biểu mẫu: đầu vào văn bản thuộc mọi loại, nút radio, hộp kiểm và lựa chọn.
Lưu ý: bạn không thể biết chỉ với CSS rằng một nhãn được liên kết với một trường tùy chọn, trừ khi trong nhãn xuất hiện sau đầu vào (và bạn sử dụng bộ tổ hợp anh em), điều này hiếm và thường không phải là ý kiến hay. Có lẽ trong tương lai các bộ chọn cha mẹ có thể giúp được việc này.
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Bất kì | 5+ |
Lưu ý rằng đó :optionalkhông phải là lựa chọn kết hợp chính xác :not(:required)bởi vì tùy chọn sau sẽ khớp với tất cả các loại phần tử trong khi :optionalbị hạn chế với các phần tử biểu mẫu.