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.

— pengguna170579
sumber

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.

— Cᴏʀʏ
sumber

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

— marcjae
sumber

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/

— Boaz - Pasang kembali Monica
sumber

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:

Tampilkan cuplikan kode

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

Luaskan cuplikan

"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.

Tampilkan cuplikan kode

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

Luaskan cuplikan

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.

Tampilkan cuplikan kode

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

Luaskan cuplikan

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.

Tampilkan cuplikan kode

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Luaskan cuplikan

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

Tampilkan cuplikan kode

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Luaskan cuplikan

Jadi kami telah menetapkan yang berikut ini

Garis besar jelek
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)

Tampilkan cuplikan kode

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

Luaskan cuplikan

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

Tampilkan cuplikan kode

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Luaskan cuplikan

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

Tampilkan cuplikan kode

body {
  background: #444
}

.wrapper {
  padding: 2em;
  width: 400px;
  max-width: 100%;
  text-align: center;
  margin: 2em auto;
  border: 1px solid #555
}

button,
.wrapper {
  border-radius: 3px;
}

button {
  padding: .25em 1em;
}

input,
label {
  color: white !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />

<div class="wrapper">
  <form>
    <input type="text" placeholder="Enter Username" name="uname" required>
    <input type="password" placeholder="Enter Password" name="psw" required>
    <button type="submit">Login</button>
  </form>
</div>

Luaskan cuplikan

— Saya haz kode
sumber

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

— Rikard Askelöf
sumber

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!

— 1010
sumber

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/>

Luaskan cuplikan

— Tom Esterez
sumber

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

— Oneezy
sumber

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

— Ali Al Amine
sumber

3

Gunakan kode ini:

input:focus {
    outline: 0;
}

— Touhid Rahman
sumber

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):

Tidak ada batasan! (batas 0px):

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>

Luaskan cuplikan

— 1,21 gigawatt
sumber

1

Anda dapat mencoba ini juga

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

atau

.classname input{
outline-style: none;
}

— Santosh Khalse
sumber

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

— Rizo
sumber

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.

— Shailesh
sumber

0

Coba ini

*:focus {
    outline: none;
}

Ini akan berpengaruh di seluruh halaman Anda

— subindas pm
sumber