Bagaimanakah Saya Boleh Mengalih Keluar Sorotan Fokus Lalai daripada Elemen Input Sambil Mengekalkan Kebolehcapaian?

Mengalih keluar Serlahan Sempadan Elemen Input

Apabila elemen HTML difokuskan dalam penyemak imbas web seperti Safari dan Chrome, sempadan biru mungkin muncul di sekelilingnya. Ini boleh mengganggu dan tidak menarik secara visual dalam reka bentuk tertentu.

Fokus pada Kebolehcapaian

Sebelum mengalih keluar serlahan fokus, pertimbangkan implikasi kebolehaksesannya. Ia memberikan petunjuk visual bagi elemen yang sedang aktif, yang penting untuk pengguna yang bergantung pada isyarat visual. Oleh itu, adalah lebih baik untuk meneroka cara alternatif untuk menjadikan fokus kelihatan.

Penyelesaian CSS

Untuk mengalih keluar garis fokus secara khusus daripada elemen input dengan kelas "tengah":

input.middle:focus {
    outline-width: 0;
}

Penyelesaian Global untuk Borang Elemen

Untuk mengalih keluar garis besar daripada semua elemen bentuk asas:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

Sokongan untuk Elemen Boleh Sunting Kandungan (CSS3)

Noah Whitmore mencadangkan memperluaskan penyelesaian untuk memasukkan unsur-unsur dengan "boleh diedit" atribut:

[contenteditable="true"]:focus {
    outline: none;
}

Lumpuhkan Garis Besar pada Semua Elemen (Tidak Disyorkan)

Walaupun tidak disyorkan, anda boleh melumpuhkan garis besar fokus secara global menggunakan:

*:focus {
    outline: none;
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengalih Keluar Sorotan Fokus Lalai daripada Elemen Input Sambil Mengekalkan Kebolehcapaian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!