Cara menggunakan:pemilih kelas pseudo dilumpuhkan untuk menukar gaya elemen borang dilumpuhkan

Cara menggunakan: pemilih kelas pseudo dilumpuhkan untuk menukar gaya elemen borang yang dilumpuhkan, contoh kod khusus diperlukan

Dalam pembangunan web, kami sering menghadapi situasi di mana elemen borang perlu dilumpuhkan, seperti pengguna mempunyai menyerahkan borang atau borang Apabila kandungan tidak boleh diubah suai, elemen borang perlu dilumpuhkan. Untuk membolehkan pengguna mengetahui dengan jelas elemen borang yang dilumpuhkan, kami boleh menggunakan pemilih kelas pseudo :disabled untuk menukar gaya elemen borang yang dilumpuhkan.

: Pemilih kelas pseudo yang dilumpuhkan memilih semua elemen borang yang dilumpuhkan. Ia boleh digunakan pada elemen bentuk biasa seperti input, pilih, textarea, dll. Dengan mentakrifkan gaya untuk pemilih kelas pseudo :disabled, kami boleh menukar rupa elemen borang yang dilumpuhkan untuk membezakannya daripada elemen borang lain yang tersedia.

Dalam HTML, kami boleh menambah atribut yang dilumpuhkan untuk membentuk elemen untuk mencapai kesan melumpuhkan. Sebagai contoh, kami boleh melumpuhkan butang melalui kod berikut:

<button disabled>确认</button>

Dalam CSS, tentukan gaya untuk elemen borang yang dilumpuhkan melalui pemilih kelas pseudo :disabled. Sebagai contoh, kami boleh menukar gaya butang dilumpuhkan melalui kod berikut:

button:disabled {
  background-color: gray;
  color: white;
  cursor: not-allowed;
}

Dalam kod di atas, kami mentakrifkan gaya untuk pemilih kelas pseudo :disabled bagi elemen butang. Warna latar belakang butang yang dilumpuhkan akan bertukar kepada kelabu, warna teks akan menjadi putih dan kursor akan dilumpuhkan. Dengan cara ini pengguna boleh melihat secara visual bahawa butang dilumpuhkan.

Begitu juga, kami juga boleh mentakrifkan gaya yang dilumpuhkan untuk jenis elemen bentuk yang lain. Contohnya, kod berikut akan melumpuhkan kotak input teks dan mentakrifkan latar belakang dan warna sempadan yang berbeza untuknya:

input[type="text"]:disabled {
  background-color: lightgray;
  border: 1px solid darkgray;
}

Dalam kod di atas, kami menggunakan input[type="text"]:disabled untuk memilih semua jenis teks dan dilumpuhkan kotak input, dan gaya ditentukan untuknya. Warna latar belakang kotak input yang dilumpuhkan akan bertukar kepada kelabu muda dan warna sempadan akan bertukar kepada kelabu gelap.

Menggunakan pemilih kelas pseudo :disabled untuk menukar gaya elemen borang yang dilumpuhkan boleh meningkatkan pengalaman pengguna dan membolehkan pengguna mengetahui dengan jelas elemen borang yang dilumpuhkan. Dengan mentakrifkan gaya yang dilumpuhkan dengan betul, kami boleh menjadikan elemen borang yang dilumpuhkan dengan lebih intuitif boleh dibezakan daripada elemen bentuk yang tersedia.

Untuk meringkaskan, dalam pembangunan web, kita boleh menukar gaya elemen borang yang dilumpuhkan melalui pemilih kelas pseudo :disabled. Dengan menetapkan atribut yang dilumpuhkan dan menentukan gaya, kami boleh membezakan elemen borang yang dilumpuhkan daripada elemen borang lain yang tersedia dan meningkatkan pengalaman pengguna. Di atas ialah pengenalan tentang cara menggunakan :disabled pseudo-class selector untuk menukar gaya elemen borang disabled Saya harap ia akan membantu anda.

Atas ialah kandungan terperinci Cara menggunakan:pemilih kelas pseudo dilumpuhkan untuk menukar gaya elemen borang dilumpuhkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!