Bagaimana Saya Mengalih Keluar Sempadan Biru Menjengkelkan daripada Butang Tersuai Chrome?

Menghilangkan Sempadan Biru Menjengkelkan pada Butang Tersuai Chrome

Apabila mencipta butang gaya tersuai menggunakan CSS, ia boleh mengecewakan untuk dihadapi jidar biru yang tidak dijangka apabila mengklik padanya dalam Chrome. Garis besar ini, yang ada walaupun menetapkan sempadan kepada "tiada", boleh membahayakan pengalaman pengguna.

Satu pendekatan biasa untuk mengalih keluar sempadan ini ialah menggunakan "butang:aktif { garis besar: tiada }" atau "butang: fokus { outline:none }." Walau bagaimanapun, ini mungkin tidak selalu berfungsi dengan berkesan.

Penyelesaian Disyorkan

Walaupun tidak digalakkan untuk menghapuskan sempadan penyemak imbas kerana ia menjejaskan kebolehaksesan, berikut ialah penyelesaian yang harus menangani isu:

button:focus {
  outline: 0;
}

Dengan menetapkan garis besar kepada "0" pada fokus, Chrome tidak lagi akan memaparkan jidar biru, meninggalkan butang tersuai anda seperti yang dimaksudkan.

Demonstrasi

Lihat coretan CSS yang dikemas kini ini dan demonstrasi langsung di http://jsfiddle.net/u4pXu/ untuk melihat masalah diselesaikan:

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;
}

button:active {
  outline: none;
  border: none;
}

button:focus {
  outline: 0;
}

Atas ialah kandungan terperinci Bagaimana Saya Mengalih Keluar Sempadan Biru Menjengkelkan daripada Butang Tersuai Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!