bagaimana menghapus garis putus-putus di sekitar elemen yang diklik di html

114

Saya menemukan bahwa jika ada alink di halaman yang tidak tertaut ke halaman baru, maka ketika pengguna mengkliknya, akan ada garis putus-putus di sekitar elemen, itu hanya akan hilang ketika pengguna mengklik hal lain di halaman, bagaimana menghapus ini?

Contoh:

masukkan deskripsi gambar di sini

Perhatikan garis putus-putus di sekitar elemen Section 2.

html css

— hguser
sumber

Bagaimana Anda mempertahankan garis besar untuk menabrak elemen, tetapi menghapusnya ketika diklik?

— Costa

198

Gunakan outline:noneuntuk menjangkarkan kelas tag

— Sowmya
sumber

Terima kasih tetapi tidak berhasil untuk saya, saya telah membuat begitu banyak tautan sebelumnya, saya tidak pernah mendapatkan masalah ini sampai sekarang. tapi sekarang saya bingung jadi apa alasan sebelum hadir?

— Durga Rao

17

Perhatikan bahwa ini akan merusak aksesibilitas situs web Anda.

— mike23

3

@Durgaprasad lihat Marks menjawab. Anda perlu menerapkannya a:active, a:focusjuga.

— Odys

Saya setuju dengan mike23. Upaya saya untuk mencapai kompromi adalah, pada acara klik (atau mungkin mouseup akan lebih baik?), Menghapus garis besar hanya untuk tautan itu (sambil juga menyetel ulang setiap dan semua tautan kembali untuk memiliki garis besar tepat sebelum penghapusan tersebut .. .lain hal-hal secara kumulatif macet karena tidak diuraikan). Ini untuk sementara menghapus garis luar dari elemen yang terakhir diklik sambil menyimpannya pada orang lain, jadi Anda masih bisa tahu apa yang Anda telusuri.

— Max Starkenburg

1

@cpu_meltdown Cobainput:focus{outline: none}

— Sowmya

55

Seperti kata @Lo Juego, baca artikelnya

a, a:active, a:focus {
   outline: none;
}

— Menandai
sumber

12

a {
    outline: 0;
  }

Tapi baca ini sebelum mengubahnya:

menghapus-garis-titik-titik

— Lo Juego
sumber

8

Coba dengan !importantdalam css.

a {
  outline:none !important;
}
// it is `very important` that there is `no` `outline` for the `anchor` tag.  Thanks!

— Akash
sumber

7

Untuk menghapus semua garis besar bertitik, termasuk yang ada di bootstraptema.

a, a:active, a:focus, 
button, button:focus, button:active, 
.btn, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus {
    outline: none;
    outline: 0;
}

input::-moz-focus-inner {
    border: 0;
}

Catatan: Anda harus menambahkan href tautan untuk bootstrap css sebelum css utama, jadi bootstrap tidak menimpa gaya Anda.

— OldTrain
sumber

3

Menghapus outlineakan membahayakan aksesibilitas situs web. Oleh karena itu saya membiarkannya di sana tetapi membuatnya tidak terlihat.

a {
   outline: transparent;
}

— chankruze
sumber

1

Menyetel kerangka menjadi transparan tetap merusak aksesibilitas situs web Anda. Idenya adalah bahwa ini memberikan indikator visual bahwa suatu elemen difokuskan. Jika Anda membuatnya tidak terlihat, indikator itu hilang. Info lebih lanjut di sini: outlinenone.com

— ktbee

1

Dalam kasus saya itu adalah tombol, dan ternyata, dengan tombol, ini hanya masalah di Firefox. Solusi ditemukan di sini :

button::-moz-focus-inner {
  border: 0;
}

— Andrew
sumber

0

Coba sederhana di bawah kode -

a{
outline: medium none !important;
}

Jika selamat bersorak! Selamat siang

— loyola
sumber