Dalam panduan ini, kita akan mendapatkan pemahaman tentang cara menonaktifkan kolom input menggunakan CSS. Jadi, Mari kita mulai!
Bagaimana Cara Menonaktifkan Bidang Input Menggunakan CSS?
Di CSS, acara dinonaktifkan dengan menggunakan ' pointer-acara ' Properti. Jadi, pertama, pelajari tentang properti pointer-events.
Apa itu Properti CSS 'pointer-events'?
' pointer-acara ” mengontrol bagaimana elemen HTML merespons atau berperilaku terhadap peristiwa sentuh, seperti peristiwa klik atau ketuk, status aktif atau arahkan kursor, dan apakah kursor terlihat atau tidak.
Sintaksis
Sintaks pointer-event diberikan sebagai berikut:
pointer-acara : mobil | tidak ada ;
Properti yang disebutkan di atas mengambil dua nilai, seperti “ mobil ' dan ' tidak ada ”:
- mobil: Ini digunakan untuk melakukan acara default.
- tidak ada: Ini digunakan untuk menonaktifkan acara.
Arahkan ke contoh yang diberikan.
Contoh 1: Menambahkan Bidang Input Menggunakan CSS
Dalam contoh ini, pertama, kita akan membuat div dan menambahkan heading dan field input ke dalamnya. Kemudian, atur jenis input sebagai “ teks ” dan tetapkan nilainya sebagai “ Masukkan nama Anda ”.
HTML
< div >< tengah >
< h1 > Nonaktifkan Bidang Input < / h1 >
< memasukkan Tipe = 'teks' nilai = 'Masukkan nama Anda' >
< / tengah >
< / div >
Setelah itu, pindah ke CSS dan gaya div dengan mengatur warna latar belakangnya sebagai “ rgb(184, 146, 99) ” dan tinggi sebagai “ 150px ”.
CSS
div {Latar Belakang- warna : rgb ( 184 , 146 , 99 ) ;
tinggi : 150 piksel;
}
Output dari kode yang dijelaskan di atas diberikan di bawah ini. Di sini, kita dapat melihat bahwa field input kita sedang aktif dan menerima input dari pengguna:
Sekarang, pindah ke bagian berikutnya di mana kita menggunakan nilai dari “ pointer-acara ” properti sebagai “ tidak ada ”.
Contoh 2: Menonaktifkan Bidang Input Menggunakan CSS
Kami sekarang akan menggunakan “ memasukkan ” untuk mengakses elemen yang ditambahkan dalam file HTML dan menetapkan nilai peristiwa penunjuk sebagai “ tidak ada ”:
memasukkan {pointer-acara : tidak ada ;
}
Setelah Anda menerapkan properti yang disebutkan di atas “ pointer-acara ' dengan ' tidak ada ”, teks bidang input tidak dapat diedit yang menunjukkan bahwa bidang input kami dinonaktifkan:
Itu dia! Kami telah menjelaskan metode menonaktifkan bidang input menggunakan CSS.
Kesimpulan
Untuk menonaktifkan bidang input dalam HTML, tombol “ pointer-acara ” properti dari CSS digunakan. Untuk melakukannya, tambahkan field input, dan atur nilai pointer-events sebagai “ tidak ada ” untuk menonaktifkan kolom input. Dalam panduan ini, kami menjelaskan metode menonaktifkan kolom input menggunakan CSS dan memberikan contohnya.