Cara menghapus sorotan batas pada elemen teks input


610

Ketika elemen HTML 'terfokus' (saat ini dipilih / dimasukkan ke dalam tab), banyak browser (setidaknya Safari dan Chrome) akan menempatkan batas biru di sekitarnya.

Untuk tata letak yang sedang saya kerjakan, ini mengganggu dan tidak terlihat benar.

<input type="text" name="user" class="middle" id="user" tabindex="1" />

Firefox sepertinya tidak melakukan ini, atau setidaknya, akan membiarkan saya mengendalikannya dengan:

border: x;

Jika seseorang dapat memberi tahu saya bagaimana kinerja IE, saya akan penasaran.

Mendapatkan Safari untuk menghapus sedikit suar ini akan menyenangkan.

Jawaban:


1100

Dalam kasus Anda, coba:

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

Atau secara umum, untuk mempengaruhi semua elemen bentuk dasar:

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

Dalam komentarnya, Noah Whitmore menyarankan untuk mengambil ini lebih jauh untuk mendukung elemen yang memiliki contenteditableatribut set true(secara efektif membuat mereka menjadi tipe elemen input). Berikut ini harus menargetkan mereka juga (di browser yang mampu CSS3):

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

Meskipun saya tidak akan merekomendasikannya, demi kelengkapan, Anda selalu dapat menonaktifkan garis fokus pada semuanya dengan ini:

*:focus {
    outline: none;
}

Perlu diingat bahwa garis fokus adalah fitur aksesibilitas dan kegunaan; itu petunjuk pengguna ke elemen apa yang saat ini fokus.


10
Terima kasih Cory, tip yang bagus. Anda juga perlu menetapkan CSS ke textarea untuk mencakup semua bidang input. input:focus, textarea:focus {outline: none;}
BaronGrivet

7
jangan lupa pilih jugaselect:focus {outline:none;}
Geek Num 88

2
Ada juga <button>tag, yang digunakan oleh jQuery UI dan Twitter Bootstrap, di antara hal-hal lain, jadi saya akan menambah button: focusdaftar untuk kelengkapannya.
Chris Parton

1
Dalam pengalaman saya ini dapat terjadi tanpa fokus, dalam hal ini saya harus menerapkannya kebutton, button:focus { outline:none; }
Mike Lyons

1
@Cᴏʀʏ maukah Anda memindahkan catatan tentang a11y dan kegunaan ke bagian paling atas dari pertanyaan Anda? IMO itu akan sangat meningkatkan jawaban Anda karena menghapus fitur a11y adalah praktik yang buruk.
Josef Engelfrost

64

Untuk menghapusnya dari semua input

input {
 outline:none;
}

31

Ini adalah utas lama, tetapi untuk referensi, penting untuk dicatat bahwa menonaktifkan kerangka elemen input tidak disarankan karena menghambat aksesibilitas.

Properti outline ada karena suatu alasan - memberikan pengguna dengan indikasi yang jelas tentang fokus keyboard. Untuk bacaan lebih lanjut dan sumber tambahan tentang subjek ini, lihat http://outlinenone.com/


1
Boaz, FYI input.middle {outline: none} masih akan memungkinkan Anda untuk menelusuri elemen (termasuk input.middle). Menekan tombol tab akan fokus pada tag input juga. Satu-satunya hal adalah bahwa Anda tidak akan dapat melihat fokus (fokus garis besar) di atasnya. Jadi tidak terlalu berbahaya untuk menggunakannya ..
:)

11
@AnishNair Only thing is that you won't be able to see the focus(outline focus) on it- dan itulah poin saya. Menghapus garis besar menonaktifkan indikasi visual dari peristiwa fokus, bukan peristiwa yang sebenarnya. Menghapus indikasi visual berarti Anda mempersulit penyandang disabilitas yang bergantung pada indikasi itu.
Boaz - Pasang kembali Monica

2
Kadang-kadang kita perlu kompromi, untuk mencapai sesuatu
:)

6
@AnishNair Benar. Tetapi lebih sering orang membaca utas ini lebih suka jalan keluar yang mudah (yaitu outline:none;) tanpa mempertimbangkan implikasinya. Hanya karena sesuatu itu mudah dan menghemat waktu, bukan berarti itu latihan terbaik :)
Boaz - Reinstate Monica

5
Saya terlambat ke diskusi, tetapi Anda masih bisa mengatur status fokus dari input (seperti mengubah warna batas atau lebar). Selama Anda mengingat aksesibilitas saat melakukan hal itu (kontras baik dll), itu hanya dapat diakses seperti yang dijelaskan secara default.
Meg

18

Ini adalah masalah umum.

Garis besar default yang dirender oleh browser adalah jelek.

Lihat ini misalnya:


"Perbaikan" paling umum yang paling direkomendasikan adalah outline:none- yang jika digunakan secara tidak benar - adalah bencana untuk aksesibilitas.


Jadi ... apa gunanya garis besar itu?

Ada situs web yang sangat kering yang saya temukan yang menjelaskan semuanya dengan baik.

Ini memberikan umpan balik visual untuk tautan yang memiliki "fokus" saat menavigasi dokumen web menggunakan kunci TAB (atau yang setara). Ini sangat berguna untuk orang-orang yang tidak dapat menggunakan mouse atau memiliki gangguan penglihatan. Jika Anda menghapus garis besar Anda membuat situs Anda tidak dapat diakses oleh orang-orang ini.

Ok, mari kita coba contoh yang sama seperti di atas, sekarang gunakan TABtombol untuk menavigasi.

Perhatikan bagaimana Anda bisa tahu di mana fokusnya bahkan tanpa mengklik input?

Sekarang, mari kita coba outline:nonepada kepercayaan kami<input>

Jadi, sekali lagi, gunakan TABtombol untuk bernavigasi setelah mengklik teks dan lihat apa yang terjadi.

Lihat bagaimana lebih sulit untuk mencari tahu di mana fokusnya? Satu-satunya tanda jitu adalah kursor berkedip. Contoh saya di atas terlalu sederhana. Dalam situasi dunia nyata, Anda tidak hanya memiliki satu elemen di halaman. Sesuatu yang lebih seperti ini.

Sekarang bandingkan dengan templat yang sama jika kita mempertahankan garis besarnya:

Jadi kami telah menetapkan yang berikut ini

  1. Garis besar jelek
  2. Menghapusnya membuat hidup lebih sulit.

Jadi apa jawabannya?

Hapus outline jelek dan tambahkan isyarat visual Anda sendiri untuk menunjukkan fokus.

Inilah contoh yang sangat sederhana tentang apa yang saya maksud.

Saya menghapus garis besar dan menambahkan batas bawah pada : fokus dan : aktif . Saya juga menghapus batas default di bagian atas, kiri dan kanan dengan mengaturnya menjadi transparan pada : fokus dan : aktif (preferensi pribadi)

Jadi, kami mencoba pendekatan di atas dengan contoh "dunia nyata" dari sebelumnya:

Ini dapat diperluas lebih lanjut dengan menggunakan perpustakaan eksternal yang dibangun di atas gagasan memodifikasi "garis besar" sebagai lawan menghapus sepenuhnya seperti Materialize

Anda bisa berakhir dengan sesuatu yang tidak jelek dan bekerja dengan sedikit usaha


18

Ini membingungkan saya selama beberapa waktu sampai saya menemukan garis itu bukan perbatasan atau garis besar, itu adalah bayangan. Jadi untuk menghapusnya saya harus menggunakan ini:

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

6

Anda dapat menggunakan CSS untuk menonaktifkannya! Ini adalah kode yang saya gunakan untuk menonaktifkan batas biru:

*:focus {
outline: none;
}

Ini akan menghapus batas biru!

Ini adalah contoh kerja: JSfiddle.net

Semoga ini bisa membantu!


4

Menghapus semua gaya fokus buruk untuk aksesibilitas dan pengguna papan ketik secara umum. Tapi garis besar jelek dan memberikan gaya fokus khusus untuk setiap elemen interaktif bisa menjadi rasa sakit yang nyata.

Jadi kompromi terbaik yang saya temukan adalah menunjukkan gaya garis besar hanya ketika kami mendeteksi bahwa pengguna menggunakan keyboard untuk bernavigasi. Pada dasarnya, jika pengguna menekan TAB, kami menunjukkan garis besar dan jika dia menggunakan mouse, kami menyembunyikannya.

Itu tidak menghentikan Anda dari menulis gaya fokus khusus untuk beberapa elemen tetapi setidaknya itu memberikan standar yang baik.

Beginilah cara saya melakukannya:

// detect keyboard users

const keyboardUserCssClass = "keyboardUser";

function setIsKeyboardUser(isKeyboard) {
  const { body } = document;
  if (isKeyboard) {
   body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
  } else {
   body.classList.remove(keyboardUserCssClass);
  }
}

// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
  if (e.key === "Tab") {
   setIsKeyboardUser(true);
  }
});
document.addEventListener("click", e => {
  // Pressing ENTER on buttons triggers a click event with coordinates to 0
  setIsKeyboardUser(!e.screenX && !e.screenY);
});

document.addEventListener("mousedown", e => {
  setIsKeyboardUser(false);
});
body:not(.keyboardUser) *:focus {
  outline: none;
}
<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
<a href="#">This is anchor link</a>
<input type="checkbox" />
<textarea>textarea</textarea>
<select/>


Ini adalah pendekatan menyeluruh. The clickpendengar adalah sentuhan yang bagus.
Keith DC

4

Saya mencoba semua jawaban dan saya masih belum bisa mengerjakannya di Mobile , sampai saya menemukannya -webkit-tap-highlight-color.

Jadi, yang berhasil bagi saya adalah ...

* { -webkit-tap-highlight-color: transparent; }

1
Itulah solusi yang saya cari. Ini sangat berguna saat Anda mengalami layar sentuh dengan elemen-elemen seperti li
Anand G

4

Satu-satunya solusi yang bekerja dengan saya

input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }


2

Tidak ada solusi yang berfungsi untuk saya di Firefox.

Solusi berikut mengubah gaya perbatasan pada fokus untuk Firefox dan menetapkan outline menjadi tidak ada untuk browser lain.

Saya telah secara efektif membuat batas fokus beralih dari cahaya biru 3px ke gaya batas yang cocok dengan batas area teks. Berikut beberapa gaya perbatasan:

Perbatasan putus-putus (perbatasan 2px putus-putus merah): Perbatasan putus-putus.  perbatasan 2px putus-putus merah

Tidak ada batasan! (batas 0px):
Tidak ada batasan.  perbatasan: 0px

Batas teks (batas 1px abu-abu solid): Batas teks.  batas 1px abu-abu solid

Ini kodenya:

input:focus, textarea:focus {
    outline: none; /** For Safari, etc **/
    border:1px solid gray; /** For Firefox **/
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}
<textarea id="textarea">yo</textarea>


1

Anda dapat mencoba ini juga

input[type="text"] {
outline-style: none;
}

atau

.classname input{
outline-style: none;
}

1

Anda dapat menghapus batas oranye atau biru (garis besar) di sekitar kotak teks / input dengan menggunakan: garis besar: tidak ada

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    outline:none !important;
}

0

Hapus outline ketika fokus ada pada elemen, menggunakan properti CSS di bawah ini:

input:focus {
    outline: 0;
}

Properti CSS ini menghapus garis besar untuk semua bidang input pada fokus atau menggunakan kelas pseudo untuk menghapus garis besar elemen menggunakan properti CSS di bawah ini.

.className input:focus {
    outline: 0;
} 

Properti ini menghapus garis besar untuk elemen yang dipilih.


0

Coba ini

*:focus {
    outline: none;
}

Ini akan berpengaruh di seluruh halaman Anda

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.