Pada kesempatan kali ini saya akan menjelaskan fungsi Pseudo class :required, :valid dan :invalid di css. Berikut penjelasan dari masing-masing pseudo class tersebut.
Pseudo class :required
Pseudo class :required memungkinkan untuk menerapkan style pada setiap element input yang memiliki attribute required, dan user atau pengguna di haruskan untuk memilih elemen form yang dibutuhkan. Berikut contoh kode css nya:
|
1 2 3 4 |
input:required { background-color: #f00; color: #f00; } |
Pseudo class :valid
Penggunaan pseudo class :valid ini berkaitan dengan validasi pada HTML, seperti contoh kasus ketika menekan tombol submit di form yang didalamnya terdapat komponen input dengan attribute required, seperti contoh saya menggunakan komponen input dengan type email, maka ketika komponen tersebut isi nya sesuai dengan penulisan email yang benar maka akan di jalankan pseudo class tersebut.
Untuk penulisan kode css tersebut, seperti di bawah ini:
|
1 2 3 4 |
input:valid { background-color: yellow; border: 1px solid yellow; } |
Pseudo class :invalid
Sedangkan penggunaan pseudo class :invalid adalah kebalikan dari pseudo class :valid, ketika nilai dari suatu komponen input salah maka akan menjalankan pseudo class tersebut.
Untuk penulisan kode css tersebut, seperti di bawah ini:
|
1 2 3 4 |
input:invalid { background-color: #f00; border: 1px solid #f00; } |
Demikian penjelasan mengenai fungsi Pseudo class :required, :valid dan :invalid di css. Semoga Bermanfaat.