Bagaimana untuk Mencapai Gaya Fokus Papan Kekunci Sahaja Tanpa Menjejaskan Estetika Visual?

Mencapai Gaya Fokus Papan Kekunci Sahaja

Anda berhasrat untuk melumpuhkan :fokus apabila tidak perlu, kerana ia bercanggah secara estetik dengan keadaan aktif. Walau bagaimanapun, anda ingin mengekalkan gaya fokus untuk pengguna papan kekunci. Berikut ialah pendekatan komprehensif untuk menangani perkara ini:

Penyelesaian :focus-visible

Pertimbangkan untuk menggunakan :focus-visible, kelas pseudo yang menunjukkan fokus apabila bermanfaat kepada pengguna, seperti semasa interaksi papan kekunci. Penyemak imbas moden kini menyokong kelas pseudo ini.

Menggunakan :focus-visible, anda boleh menggunakan gaya fokus secara bersyarat:

<code class="css">button:focus-visible {
  /* remove default focus style */
  outline: none;
  /* custom focus styles */
  box-shadow: 0 0 2px 2px #51a7e8;
  color: lime;
}</code>

Keserasian Pelayar

Pelayar tanpa sokongan :fokus-kelihatan mungkin masih memaparkan dering fokus lalai. Untuk memastikan gelagat yang konsisten, gunakan strategi sandaran:

<code class="css">button:focus {
  outline: none;
  background: #ffdd00; /* gold */
}

button:focus:not(:focus-visible) {
  background: white; /* undo gold */
}</code>

Gaya Fokus Papan Kekunci Sahaja

Untuk penyelesaian gaya fokus papan kekunci sahaja, pertimbangkan untuk menggunakan pendekatan ini:

<code class="css">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;
}</button></code>

Kaedah ini menggunakan elemen dalaman () dalam setiap butang/pautan/dsb. dan menetapkan indeks tab untuk elemen dalaman ini. Gaya fokus hanya digunakan pada elemen dalam, memastikan ia hanya muncul pada fokus papan kekunci.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Gaya Fokus Papan Kekunci Sahaja Tanpa Menjejaskan Estetika Visual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!