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

Mengalih keluar Serlahan Sempadan pada Elemen Teks Input

Apabila elemen input menerima fokus, penyemak imbas seperti Safari dan Chrome menambah sempadan biru di sekelilingnya . Ini boleh mengganggu secara visual atau bercanggah dengan estetik reka bentuk yang diingini.

Penyelesaian:

Untuk mengalih keluar serlahan jidar, gunakan CSS untuk menetapkan sifat lebar garis besar kepada 0 apabila elemen input difokuskan:

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

Ini akan menghapuskan sorotan sempadan khusus untuk elemen input dengan bahagian tengah kelas.

Pertimbangan Kebolehcapaian:

Perhatikan bahawa garis fokus ialah ciri kebolehcapaian yang penting, kerana ia menunjukkan elemen yang sedang difokuskan. Mengalih keluarnya sepenuhnya boleh menghalang kebolehaksesan untuk pengguna yang bergantung pada isyarat visual ini. Sebaliknya, pertimbangkan untuk menggunakan sifat garis besar untuk menyesuaikan penampilan garis fokus, seperti menjadikannya telus atau warna yang berbeza.

Elemen Lain:

Pendekatan yang sama boleh digunakan untuk mengalih keluar serlahan sempadan pada elemen input bentuk lain, seperti pilih, kawasan teks dan butang:

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

Pilihan Lanjutan:

Untuk elemen dengan atribut contenteditable, yang pada asasnya membenarkan mana-mana elemen menjadi editor teks, gunakan CSS ini:

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

Lumpuhkan untuk Semua:

Jika mahu, anda boleh melumpuhkan garis fokus pada semua elemen dengan CSS ini:

*:focus {
    outline: none;
}

Walau bagaimanapun, ini biasanya tidak disyorkan, kerana ia mungkin menghalang kebolehaksesan untuk pengguna yang bergantung pada ciri garis fokus.

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