Kelas :optionalpseudo menargetkan input (termasuk s) yang tidak secara khusus ditetapkan sebagai required(tidak memiliki requiredatribut).
Ini dapat berguna saat Anda ingin memberikan bidang opsional tampilan tertentu, mungkin sedikit kurang terlihat daripada yang diperlukan.
Sintaksis
input(type=text):optional ( border: 1px solid #eee; )Demo
Dalam demo berikut, bidang opsional ("Nama", "Jenis Kelamin", dan "Benua") diturunkan opasitasnya menjadi 40% sehingga pengguna dapat langsung mengetahui bidang yang wajib diisi. Dalam hal ini, "Email". Saat diarahkan, masukan opsional akan melihat opasitas kembali ke 100%.
The optionalbekerja pada semua jenis elemen form: input teks dari semua jenis, tombol radio, kotak centang, dan memilih.
Catatan: Anda tidak dapat mengetahui hanya dengan CSS bahwa label dikaitkan dengan bidang opsional, kecuali dalam label tersebut muncul setelah input (dan Anda menggunakan kombinator saudara), yang jarang terjadi dan biasanya bukan ide yang baik. Mungkin di masa depan penyeleksi orang tua dapat membantu dalam hal ini.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Apa saja | 5+ |
Perhatikan bahwa :optionalitu bukan kebalikan dari :not(:required)karena yang terakhir akan cocok dengan semua jenis elemen sementara :optionaldibatasi untuk elemen bentuk.