Mengapa Butang Tersuai Saya Mempunyai Sempadan Biru dalam Chrome, dan Bagaimana Saya Boleh Mengalihkannya Sambil Mengekalkan Kebolehaksesan?

Cara Mengalih Keluar Sempadan Biru daripada Butang Gaya Tersuai dalam Chrome

Untuk tapak web dengan reka bentuk tersuai, pembangun selalunya memilih untuk menggayakan elemen melalui Cascading Style Sheets (CSS). Walau bagaimanapun, pengguna Chrome mungkin menghadapi masalah apabila sempadan biru muncul di sekeliling butang apabila diklik.

Mentakrifkan Semula Keadaan Fokus

Sempadan biru yang bermasalah ialah keadaan fokus lalai penyemak imbas. Untuk mengalih keluarnya, sifat keadaan fokus seperti garis besar boleh diubah suai:

button:focus {
  outline: 0;
}

Dengan menetapkan sifat garis besar kepada 0, sempadan keadaan fokus dilumpuhkan dengan berkesan.

Mengalih keluar Amaran Regresi Kebolehcapaian

Adalah penting untuk ambil perhatian bahawa mengalih keluar keadaan fokus dengan menetapkan garis besar: 0 mungkin menghalang kebolehaksesan untuk pengguna yang bergantung pada visual isyarat seperti sempadan fokus.

Untuk kebolehaksesan yang lebih baik, CSS berikut disyorkan:

button:focus {
  outline: none;
}

Pengubahsuaian ini mengalih keluar gaya garis besar lalai dan mengekalkan kebolehaksesan.

Contoh

Dalam CSS yang disediakan, peraturan butang:fokus telah ditambah:

button.launch {
  background-color: #F9A300;
  border: none;
  height: 40px;
  padding: 5px 15px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
  margin-right: 10px;
}

button.launch:hover {
  cursor: pointer;
  background-color: #FABD44;
}

button.change {
  background-color: #F88F00;
  border: none;
  height: 40px;
  padding: 5px 15px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
  margin-right: 10px;
}

button.change:hover {
  cursor: pointer;
  background-color: #F89900;
}

/* Remove annoying Chrome blue focus border */
button:focus {
  outline: none;
}

Ini memastikan bahawa sempadan biru dialih keluar dalam Chrome sambil mengekalkan kebolehaksesan yang betul.

Atas ialah kandungan terperinci Mengapa Butang Tersuai Saya Mempunyai Sempadan Biru dalam Chrome, dan Bagaimana Saya Boleh Mengalihkannya Sambil Mengekalkan Kebolehaksesan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!