Belajar Selector Untuk Input Pada CSS

Sekarang kita akan belajar beberapa selector yang dapat teman teman bisa gunakan tentunya pada CSS tapi khusus untuk tag input. Disini saya sudah menyediakan input radio, input text dan input email dan salah satu pada inputannya saya buat disabled yang artinya kotak inputannya tidak bisa di klik

jadi dengan disabled ini kita ingin menonaktifkan setelah melakukan hal-hal tertentu. Langsung saja yang pertama untuk radio teman teman bisa memilih bagian yang sudah di check ini dengan CSS cara penulisannya input:checked

yang artinya setiap yang di check kita mau berikan margin-right

jadi dengan selector :checked ini kita bisa kasih feedback yang lebih jelas kepada user ketika inputan tersebut di checked. Itu tentang :checked. Selanjutnya bagian yang kedua kita akan melihat tiga selector lagi yaitu enable, disabled dan juga invalid. Untuk input:enabled kita akan memilih semua tag input yang tidak diberikan disabled teman teman bisa buktikan dengan memberikan border warna orange

maka hasilnya akan seperti berikut

kecuali yang disabled. Sebaliknya jika kita memilih input:disabled kita tulis

dan yang terakhir bagian yang invalid yang menurut saya selector yang unik dimana selector ini cara kita memberikan hasil error atau tidak sesuai dengan inputnya. Misalnya inputan email tapi kita isi text biasa maka kita ingin melakukan sesuatu pada CSS yakni memberikan background

jika kita jalankan dan kita isi bagian input email dengan text biasa maka hasilnya akan seperti ini artinya inputannya error

sedangkan jika kita isi format emailnya benar maka backgroudnya akan hilang. Terima kasih dan sampai jumpa.