Hapus batas biru dari tombol bergaya css di Chrome


811

Saya sedang mengerjakan halaman web, dan saya ingin <button>tag bergaya khusus . Jadi dengan CSS, aku berkata: border: none. Sekarang ini berfungsi dengan baik di safari, tetapi di chrome, ketika saya mengklik salah satu tombol, itu menempatkan perbatasan biru yang mengganggu di sekitarnya. Saya berpikir button:active { outline: none }atau button:focus { outline:none }akan bekerja, tetapi tidak juga. Ada ide?

Ini terlihat seperti sebelum diklik (dan bagaimana saya ingin tetap terlihat setelah diklik):

Dan ini adalah perbatasan yang saya bicarakan:

masukkan deskripsi gambar di sini

Inilah CSS saya:

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

1
Terlihat oke untuk saya? jsbin.com/oSAdovun/1/edit
davidpauljunior

Saya tidak yakin mengapa ini bekerja di demo Anda .. Ini melakukannya di sini: jsfiddle.net/NgL8H @davidpauljunior
eshellborn

5
Saya menambahkan aturan fokus ke bagian bawah yang menurut Anda tidak berfungsi, tetapi sepertinya: jsfiddle.net/NgL8H/1
davidpauljunior

21
Anda tidak harus menghapus garis besar sepenuhnya - mereka yang cacat - dan mereka seperti saya yang sering menggunakan keyboard karena cepat - perlu untuk menavigasi. Akan jauh lebih baik untuk mendesain ulang garis besar untuk sesuatu yang Anda sukai.
Chris B

3
Harap jangan atur outline: noneseperti ini kecuali Anda siap mengganti kehilangan dalam aksesibilitas. Lihat situs web ini: outlinenone.com
Flimm

Jawaban:


1536

Melakukan hal ini tidak disarankan karena akan mengurangi aksesibilitas situs Anda; untuk info lebih lanjut, lihat posting ini .

Yang mengatakan, jika Anda bersikeras, CSS ini harus bekerja:

button:focus {outline:0;}

Lihat atau JSFiddle: http://jsfiddle.net/u4pXu/

Atau dalam cuplikan ini:

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.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;}
<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>


49
Tidakkah ini benar-benar terjadi outline: none;atau tidak penting?
henrywright

2
@henrywright Yah, OP mencobanya dan tidak berhasil untuknya.
diosney

58
Tolong jangan pernah melakukan ini. Keluhan kecil Anda tidak relevan dengan masalah aksesibilitas masif ini
phazei

20
Anda harus menata ulang gaya ini alih-alih menyembunyikannya sepenuhnya. Dalam hal ini, cobalah sesuatu seperti button:focus{ outline-color: #A75000 }... alih-alih menyembunyikan indikator Anda mengubahnya menjadi oranye gelap yang sesuai dengan gaya.
cloudworks

3
@ SeanO'Brien mengabulkan situasi yang diberikan OP mungkin untuk situs yang memiliki 5 pengguna, semuanya dapat berbadan sehat. Tetapi mungkin mayoritas dari 1.123 orang yang telah meng-upgrade ini berpikir ini adalah cara yang tepat untuk melakukan hal-hal untuk situasi yang mereka hadapi tetapi sebenarnya itu tidak diskriminatif.
alexrogers

296

Tunggu! Ada alasan untuk garis jelek itu!

Sebelum menghapus garis biru jelek itu, Anda mungkin ingin mempertimbangkan aksesibilitas . Secara default, garis biru itu ditempatkan pada elemen yang bisa fokus. Ini agar pengguna dengan masalah aksesibilitas dapat memfokuskan tombol itu dengan menabraknya. Beberapa pengguna tidak memiliki keterampilan motorik untuk menggunakan mouse dan hanya menggunakan keyboard (atau perangkat input lain) untuk interaksi komputer. Saat Anda menghapus garis biru, tidak ada lagi indikator visual tentang elemen apa yang difokuskan. Jika Anda akan menghapus garis biru, Anda harus menggantinya dengan jenis indikasi visual lain bahwa tombolnya terfokus.

Kemungkinan Solusi: Gelapkan Tombol saat fokus

Untuk contoh di bawah, garis biru Chrome pertama kali dihapus dengan menggunakan button:focus { outline:0 !important; }

Berikut adalah tombol Bootstrap dasar Anda seperti yang muncul secara normal: Tombol Bootstrap dalam Keadaan Normal

Berikut adalah tombol ketika mereka menerima fokus: Tombol Bootstrap dalam Status Fokus

Di sini tombol saat ditekan: masukkan deskripsi gambar di sini

Seperti yang Anda lihat, tombolnya sedikit lebih gelap ketika menerima fokus. Secara pribadi, saya akan merekomendasikan untuk membuat tombol fokus lebih gelap sehingga ada perbedaan yang sangat mencolok antara keadaan fokus dan keadaan normal tombol.

Ini bukan hanya untuk pengguna yang dinonaktifkan

Membuat situs Anda lebih mudah diakses adalah sesuatu yang sering diabaikan tetapi dapat membantu menciptakan pengalaman yang lebih produktif di situs web Anda. Ada banyak pengguna normal yang menggunakan perintah keyboard untuk bernavigasi melalui situs web untuk tetap menggunakan keyboard.


40
Masalahnya adalah di Chrome itu terjadi bahkan pada klik bukan hanya tab (implementasi logis ditemukan di sebagian besar browser). Jadi sebenarnya Google mengurangi aksesibilitas karena sebagian besar pengembang hanya akan mematikannya (di Chrome) Lebih banyak waktu terbuang untuk meneliti / memperbaiki masalah yang berkaitan dengan Google / Chrome (penghematan kata sandi, dukungan css email, ini)
RunLoop

3
Anda benar! Untuk mengambil aksesibilitas dalam akun saat menghapus garis besar, Anda perlu sedikit JavaScript: paciellogroup.com/blog/2012/04/…
mems

Anda bahkan tidak dapat menata / memformat komentar dengan cara yang bisa Anda jawab, tho. sulit untuk memberikan umpan balik pada tingkat detail ini hanya melalui komentar.
A-Dubb

@RunLoop Bagaimana Anda menghapus atau mengubah batas biru setelah klik? Bisakah itu dilakukan melalui CSS atau diperlukan Javascript?
Nick

orang-orang dengan masalah-masalah itu dapat menggunakan vimium-ff
yukashima huksay

60

Saya hanya menghapus garis besar dari semua tag di halaman dengan memilih semua dan menerapkan garis besar: tidak ada untuk semuanya :)

*:focus {outline:none}

Seperti yang disebutkan bagofcole, Anda mungkin perlu menambahkan! Penting juga, sehingga gayanya akan terlihat seperti ini:

*:focus {outline:none !important}

6
Tolong jangan lakukan ini. Pengguna yang menavigasi halaman Anda dengan keyboard tidak akan dapat melihat elemen yang saat ini difokuskan. Alih-alih menyembunyikan garis besar, blur elemen jika acara klik berasal dari mouse.
joepio

Pada dasarnya pasti ada beberapa gaya fokus lain ...
Arziel

46

Dalam contoh saya tentang masalah ini saya harus menentukan box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

4
Terima kasih untuk kiriman Anda! Properti "bayangan kotak" adalah titik dalam kasus saya.
Nightking

1
Ini adalah masalah yang sama bagi saya. Bukannya itu relevan tapi saya menggunakan Roots 'Sage Theme di Chrome pada Ubuntu 17.10.
Spencer Hill

1
Hanya ini yang berhasil setelahbox-shadow
sura2k

1
Saya harus menambahkan! Penting untuk membuatnya bekerja, mungkin bootstrap memiliki definisi khusus untuk suatu tempat
webMan

1
ini bekerja untuk saya sobat !, terima kasih untuk posting solusinya. sorak-sorai
theITvideos

44

Jangan lupa !importantdeklarasi, untuk hasil yang lebih baik

button:focus {outline:0 !important;}

Aturan yang memiliki properti! Penting akan selalu diterapkan di mana pun aturan itu muncul dalam dokumen CSS.


14
"untuk hasil yang lebih baik"? Bisakah Anda menjelaskan apa yang penting?
Popnoodles

5
Tetapi bisakah Anda menjelaskan apa fungsinya? "Karena itu ada" tidak menjelaskan kepada orang yang tidak tahu alasannya apa alasannya.
Popnoodles

48
! Penting harus jarang digunakan, dan hanya untuk memastikan bahwa sesuatu tidak boleh ditimpa oleh aturan berikutnya. Anda harus menargetkan elemen Anda dengan pemilih yang benar saat menimpa aturan sebelumnya.
Popnoodles

24
Penggunaan! Penting jarang dibenarkan. Anda harus selalu menyeleksi penyeleksi css Anda dengan cara yang lebih masuk akal, dan tidak digunakan! Penting hanya karena memberi Anda "hasil yang lebih baik".
Ronen Cypis

5
Tolong jangan lakukan ini. Sementara secara teknis ini menjawab pertanyaan OP, nuking setiap indikasi posisi fokus dengan outline:0 !importantUX buruk dan praktik dev buruk. Jika Anda melakukan ini, pastikan Anda melakukan sesuatu yang lain untuk menunjukkan posisi fokus (seperti mengubah warna latar elemen).
cloudwork

26

Menghapus outlineitu mengerikan untuk aksesibilitas! Idealnya, cincin fokus hanya muncul ketika pengguna berniat untuk menggunakan keyboard .

Gunakan : fokus-terlihat . Saat ini proposal W3C untuk menata fokus hanya keyboard menggunakan CSS, dan didukung di Firefox ( caniuse ). Sampai browser besar lainnya mendukungnya, Anda dapat menggunakan polyfill yang kuat ini .

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

Saya juga menulis posting yang lebih rinci kalau-kalau Anda membutuhkan info lebih lanjut.


1
Pikiran Anda, AFAIK itu tidak perlu outlineseperti itu, asalkan: fokus negara dibuat jelas terlihat melalui beberapa cara lain, seperti border, background-color, box-shadow, dll
mar Örlygsson

2
Jawaban Terbaik! Posting Anda layak dibaca (dan saya sekarang melihat sisa blog Anda 😅) Paket npm fokus-terlihat benar-benar tepat untuk saat ini.
FelDev

1
Ini jelas merupakan solusi terbaik. Dengan hanya beberapa baris kode saya menyingkirkan perbatasan biru yang mengganggu pada klik, sambil tetap menggunakan keyboard. Terima kasih!
pesta

1
Apakah data ini benar? Pemilih ini tampaknya didukung di Chrome, bukan Firefox. developer.mozilla.org/en-US/docs/Web/CSS/…
Kevin Suttle

Tampaknya di Firefox, pemilih dipanggil :-moz-focusring, tetapi bertentangan dengan apa yang dikatakan oleh dokumen, itu tidak membedakan antara klik dan fokus tab. Di Chrome, mulai sekarang Anda harus mengaktifkan flag tertentu agar dapat berfungsi
phil294

12

Tambahkan ini dalam file CSS Anda.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

3
Terima kasih. berfungsi tetapi MDN mengatakan: Fitur ini tidak standar dan tidak pada jalur standar. Jangan menggunakannya di situs produksi yang menghadap Web: itu tidak akan berfungsi untuk setiap pengguna. Mungkin juga ada banyak ketidaksesuaian antara implementasi dan perilaku mungkin berubah di masa depan.
Behnam Mohammadi

8

Gunakan ini:

:active {
    outline:none;
}

atau ini jika itu tidak berhasil:

:active {
   outline:none !important;
}

Ini berfungsi untuk saya (setidaknya FF dan Chrome). Alih-alih menargetkan :focusnegara, hanya menargetkan :activenegara dan yang akan menghapus sorotan mencolok estetika di browser Anda ketika pengguna mengklik tautan. Tapi itu masih akan mempertahankan status fokus ketika pengguna dengan cacat tab atau shift-tab melalui halaman. Kedua belah pihak senang. :)


4
Mengapa mengedit jawaban saya jika Anda hanya akan mengganti versi yang diperkecil dengan kode yang sama tetapi diperluas? Itu tidak menjelaskan lebih baik bagi pengguna. Apakah Anda mendapatkan kredit jawaban untuk itu atau sesuatu? LOL ...
chuk

3
Inti dari situs StackExchange seperti ini adalah memiliki jawaban yang membantu siapa saja yang membacanya untuk mengerti. Untuk tujuan itu, jawaban dengan kode singkat dan minimal tidak membantu seperti kode yang diformat. Meningkatkan jawaban dengan membuatnya lebih mudah dibaca adalah cara normal untuk meningkatkan situs untuk semua orang.
bignose

7

untuk masalah ini:

masukkan deskripsi gambar di sini

Gunakan ini:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

hasil:

masukkan deskripsi gambar di sini


7

Bagi siapa pun yang menggunakan Bootstrap dan mengalami masalah ini, mereka menggunakan: active: focus serta just: active dan: focus sehingga Anda akan memerlukan:

element:active:focus {
    outline: 0;
}

Mudah-mudahan menyelamatkan seseorang beberapa saat untuk menemukan yang keluar, membenturkan kepalaku sedikit bertanya-tanya mengapa hal sederhana seperti itu tidak berhasil.


6

Sebagian besar solusi tidak akan berfungsi jika Anda menggunakan Bootstrap 4.1 dan mungkin versi lainnya. Setelah banyak membenturkan kepala, saya menemukan Anda perlu menerapkan kelas shadow-none :

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

4

Inilah yang bekerja untuk saya:

button:focus {
    box-shadow:none;
}

4

Perbaikan untuk Chrome dan browser lainnya

button:focus { outline: none !important; box-shadow: none !important; }

3

coba kode ini untuk semua elemen yang memiliki masalah batas biru

*{
outline: none;
}

atau

*{
outline-style: none;
}

3

Cara lain untuk memecahkan masalah aksesibilitas yang belum disebutkan di sini adalah melalui sedikit Javascript . Kredit pergi dari blogpost penuh wawasan ini dari hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

Pendekatan di sini sangat sederhana namun efektif: Menambahkan kelas ketika orang-orang mulai menggunakan tab-key untuk menavigasi halaman (dan secara opsional menghapusnya ketika beralih ke mouse lagi. Kemudian Anda dapat menggunakan kelas ini untuk menampilkan garis fokus atau tidak .

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

3

Saya menghadapi masalah yang sama jadi saya menggunakan CSS- sederhana

.custom-button {
    outline: none
}

2

Jika Anda ingin menghapus efek yang sama pada input, Anda bisa menambahkan kode berikut ini juga tombol.

input:focus {outline:0;}

2

Sampai semua browser modern akan mulai mendukung css-selector : focus-visible ,
cara termudah dan mungkin terbaik untuk menghemat aksesibilitas adalah dengan menghapus fokus rumit ini hanya untuk pengguna mouse dan menyimpannya untuk pengguna keyboard :

1.Gunakan polyfill mungil ini (sekitar 10kb): https://github.com/WICG/focus-visible
2.Tambahkan kode selanjutnya di suatu tempat di css Anda:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

Dukungan browser css4-selector: fokus-terlihat sekarang sangat lemah:
https://caniuse.com/#search=focus-visible



1

Ini merupakan masalah dalam keluarga Chrome dan telah ada di sana selamanya.

Bug telah muncul https://bugs.chromium.org/p/chromium/issues/detail?id=904208

Itu dapat ditampilkan di sini: https://codepen.io/anon/pen/Jedvwj segera setelah Anda menambahkan perbatasan untuk apa pun seperti tombol (misalnya role = "tombol" telah ditambahkan ke tag misalnya) Chrome mengacaukan dan mengatur status fokus saat Anda mengklik dengan mouse Anda.

Saya sangat merekomendasikan menggunakan perbaikan ini: https://github.com/wicg/focus-visible .

Lakukan saja yang berikut ini

npm install --save focus-visible

Tambahkan skrip ke html Anda:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

atau impor ke file entri utama Anda jika menggunakan webpack atau yang serupa:

import 'focus-visible/dist/focus-visible.min';

lalu letakkan ini di file css Anda:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

Anda bisa mengatur:

button:focus {outline:0;}

tetapi jika Anda memiliki banyak pengguna, Anda merugikan mereka yang tidak dapat menggunakan mouse atau mereka yang hanya ingin menggunakan keyboard mereka untuk kecepatan.


1

Saya memiliki masalah yang sama dengan bootstrap. Saya memecahkan dengan garis besar dan bayangan kotak

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.