Gaya keadaan elemen bentuk dapat meningkatkan pengalaman pengguna dengan ketara, dan melalui maklum balas visual, pengguna dapat memahami status pilihan dengan jelas, item yang diperlukan dan melumpuhkan kesan. 1. Gunakan kelas pseudo yang diperiksa untuk menyerlahkan pemilihan, dan memperibadikan kotak semak atau butang radio dengan menyembunyikan kawalan asli dan menyesuaikan gaya; 2. Gunakan kelas pseudo yang dilumpuhkan untuk menjadikan keadaan kurang upaya lebih intuitif. Kaedah biasa termasuk mengurangkan ketelusan, mengubah warna latar belakang dan menetapkan kursor yang tidak dapat dikilangkan; 3. Gunakan kelas pseudo yang diperlukan untuk mengenal pasti item yang diperlukan, biasanya menggabungkan warna sempadan dan asterisk merah, dan disyorkan untuk meningkatkan kebolehcapaian dengan teks atau ikon; 4. Perhatikan perintah cascade apabila pelbagai negeri wujud bersama. Adalah disyorkan untuk menulis gaya dalam urutan lalai, hover, fokus, aktif, dan kurang upaya, dan menggunakan beberapa pemilih untuk mengendalikan negara yang bercanggah. Walaupun teknik ini kecil, mereka mempunyai kesan penting terhadap pengalaman operasi pengguna.

Gaya keadaan elemen bentuk sebenarnya agak praktikal, terutamanya dalam meningkatkan pengalaman pengguna. Sebagai contoh, melalui maklum balas visual, memberitahu pengguna bahawa pilihan tertentu dipilih, input diperlukan, atau butang tidak tersedia, semuanya boleh dicapai menggunakan pemilih kelas pseudo CSS.

Bahagian berikut bercakap tentang kaedah pemprosesan gaya keadaan yang paling biasa digunakan, yang secara langsung sesuai dengan masalah praktikal yang dihadapi semasa pembangunan.

Bagaimana untuk menyerlahkan kotak semak atau butang radio yang dipilih?

:checked boleh digunakan untuk mengawal gaya keadaan <input type="checkbox"> dan <input type="radio"> . Walaupun terdapat sekatan untuk mengubah suai penampilan kawalan asli secara langsung, ia boleh disimulasikan dengan menyembunyikan kawalan asal dan kemudian menyesuaikan blok gaya.

Untuk memberi contoh mudah:

 input [type = "checkbox"] {
  Paparan: Tiada;
}

input [type = "cecurbox"] label :: sebelum {
  Kandungan: "";
  paparan: blok sebaris;
  lebar: 16px;
  Ketinggian: 16px;
  Sempadan: 2px pepejal #ccc;
  margin-kanan: 8px;
}

input [type = "ceckbox"]: Label yang diperiksa :: Sebelum {
  latar belakang warna: #007BFF;
  imej latar belakang: url ('checkmark.svg');
  Latar Belakang: Cover;
}

Ini akan membuat kotak semak dengan gaya yang benar -benar tersuai, yang boleh dilakukan dengan kotak semak dan label yang betul di HTML.

Bagaimana menjadikan keadaan kurang upaya lebih intuitif?

Untuk :disabled , amalan biasa untuk mengurangkan ketelusan, menukar warna, atau menambah teks segera. Keadaan ini biasanya digunakan dalam butang atau kotak input, menunjukkan bahawa ia tidak dapat digunakan.

Anda boleh melakukan ini:

• Gunakan opacity: 0.6; Untuk melemahkan prestasi visual
• Tukar warna latar belakang atau warna sempadan, seperti kelabu
• Untuk butang, anda boleh menambah cursor: not-allowed; Prompt tidak dapat diklik

Contohnya:

 butang: dilumpuhkan {
  Kelegapan: 0.6;
  kursor: tidak diberi makan;
  latar belakang warna: #ddd;
}

Harus diingat bahawa sesetengah pelayar mempunyai gaya lalai yang degil, jadi lebih baik untuk menetapkan semula gaya lalai terlebih dahulu dan kemudian menetapkannya secara seragam.

Bagaimana mengenal pasti item yang diperlukan?

Kelas pseudo :required membolehkan pengguna melihat sekilas medan mana yang mesti diisi. Cara biasa adalah untuk menambah bintang merah kecil di sebelah kotak input, atau menambah sedikit warna ke sempadan kotak input.

Cara menulis biasa:

 Input: Diperlukan {
  Border-color: #FF4D4D;
}

input: diperlukan.REQUIRE-INDICATOR :: Selepas {
  Kandungan: " *";
  warna: merah;
}

Walau bagaimanapun, warna sahaja mungkin tidak cukup mesra. Adalah disyorkan untuk menggunakannya bersempena dengan ikon atau teks, terutamanya untuk pengguna buta warna.

Bagaimana untuk mengutamakan pelbagai negeri?

Kadang -kadang elemen mungkin berada di pelbagai negeri pada masa yang sama, seperti butang kurang upaya sedang hover atau fokus, jadi anda perlu mempertimbangkan perintah sarung.

Perintah penulisan CSS akan menjejaskan kesan akhir. Umumnya disyorkan untuk menulis mengikut urutan berikut:

• Gaya lalai
• :hover
• :focus
• :active
• :disabled

Ini memastikan bahawa interaksi tetikus dan keadaan kurang upaya tidak mengganggu satu sama lain. Sekiranya terdapat konflik di antara negeri -negeri tertentu, ia juga boleh ditentukan secara eksplisit dengan pemilih multi, seperti:

 butang: hover: dilumpuhkan {
  /* Mengatasi gaya hover butang kurang upaya di sini*/
}

Pada dasarnya teknik -teknik ini semua mengenainya. Kuncinya adalah untuk memahami penggunaan setiap kelas pseudo dan fleksibel menggabungkan mereka mengikut keperluan projek. Butiran ini tidak kelihatan besar, tetapi jika anda tidak melakukannya dengan baik, ia dengan mudah akan menjejaskan pengalaman operasi pengguna.

Atas ialah kandungan terperinci Bagaimana gaya bentuk elemen berdasarkan keadaan mereka (mis. ,: diperiksa ,: dilumpuhkan ,: diperlukan)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!