Bagaimanakah Saya Boleh Lumpuhkan Gaya Fokus Semasa Mengekalkan Kebolehcapaian Papan Kekunci?

Bolehkah saya Lumpuhkan Fokus Apabila Ia Tidak Diperlukan?

Anda mahu melumpuhkan fokus apabila ia tidak diperlukan kerana anda tidak menyukai penampilan navigasi anda apabila fokus adalah di atasnya. Ia menggunakan gaya yang sama seperti .aktif dan ia mengelirukan. Walau bagaimanapun, anda tidak mahu menyingkirkannya untuk orang yang menggunakan papan kekunci.

Isu Mungkin Selesai

Sesetengah poster telah menyebut kelas pseudo :focus-visible, yang kini mempunyai sokongan pelayar yang baik. Mengikut spesifikasi, penyemak imbas kini seharusnya hanya menunjukkan fokus apabila ia membantu pengguna, seperti apabila pengguna berinteraksi dengan halaman melalui papan kekunci atau beberapa peranti bukan penunjuk lain.

Ini bermakna dalam kebanyakan penyemak imbas, apabila pengguna mengklik/mengetik butang (atau elemen lain yang boleh difokuskan), Ejen Pengguna tidak akan menunjukkan cincin fokus walaupun butang difokuskan, kerana dalam kes ini cincin fokus tidak membantu pengguna.

Keserasian Ke Belakang

Masalah yang mungkin berlaku dengan menggunakan :focus-visible seperti ini ialah penyemak imbas yang tidak menyokongnya akan menunjukkan cincin fokus lalai, yang mungkin tidak jelas atau kelihatan bergantung pada reka bentuk.

Jawapan Asal

Jika penyelesaian :fokus-boleh dilihat tidak mencukupi untuk keserasian ke belakang, anda boleh mencapai gaya fokus papan kekunci sahaja untuk butang, pautan dan elemen bekas lain dengan penyelesaian berikut:

button {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
}

.btn {
  all: initial;
  margin: 1em;
  display: inline-block; 
}

.btn__content {
  background: orange;
  padding: 1em;
  cursor: pointer;
  display: inline-block;
}


/* Fixing the Safari bug for `<button>`s overflow */
.btn__content {
    position: relative;
}

/* All the states on the inner element */
.btn:hover > .btn__content  {
    background: salmon;
}

.btn:active > .btn__content  {
    background: darkorange;
}

.btn:focus > .btn__content  {
    box-shadow: 0 0 2px 2px #51a7e8;
    color: lime;
}

/* Removing default outline only after we've added our custom one */
.btn:focus,
.btn__content:focus {
    outline: none;
}

Teknik ini meletakkan semua gaya pada elemen dalam bekas, menghalang gaya fokus daripada muncul apabila tetikus digunakan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Lumpuhkan Gaya Fokus Semasa Mengekalkan Kebolehcapaian Papan Kekunci?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!