Pertanyaan Bagaimana cara menghapus border (outline) di sekitar kotak teks / input? (Chrome) [duplikat]


Pertanyaan ini sudah memiliki jawaban di sini:

Adakah yang bisa menjelaskan cara menghapus perbatasan oranye atau biru (garis besar) di sekitar kotak teks / input? Saya pikir itu hanya terjadi di Chrome untuk menunjukkan bahwa kotak input aktif. Berikut masukan CSS yang saya gunakan:

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

enter image description here


970
2017-08-03 13:49


asal


Jawaban:


Perbatasan ini digunakan untuk menunjukkan bahwa elemen difokuskan (yaitu Anda dapat mengetikkan input atau menekan tombol dengan Enter). Anda dapat menghapusnya, meskipun:

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

Anda mungkin ingin menambahkan beberapa cara lain bagi pengguna untuk mengetahui elemen apa yang memiliki fokus keyboard meskipun untuk kegunaan.

Chrome juga akan menerapkan sorotan ke elemen lain seperti DIV yang digunakan sebagai modals. Untuk mencegah sorotan pada mereka dan semua elemen lainnya juga, Anda dapat melakukan:

*:focus {
    outline: none;
}

1809
2017-08-03 13:52



Jawaban saat ini tidak bekerja untuk saya dengan Bootstrap 3.1.1. Inilah yang harus saya timpa:

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

99
2018-02-21 03:43



input:focus {
    outline:none;
}

Ini akan dilakukan. Garis luar oranye tidak akan muncul lagi.


83
2017-08-03 13:52



<input style="border:none" >

Bekerja dengan baik untukku. Berharap untuk tetap di html itu sendiri ... :)


45
2017-10-08 07:26



Saya telah menemukan solusinya.
Saya menggunakan: outline:none; dalam CSS dan tampaknya telah berhasil. Terima kasih atas bantuannya. :)


34
2017-08-03 13:51



Larutan

*:focus {
    outline: 0;
}

PS: Gunakan outline:0 dari pada outline:none sedang fokus. Ini praktik yang valid dan lebih baik.


22
2018-05-23 09:55



ini menghapus bingkai oranye di krom dari semua dan elemen apa pun dan di mana pun itu

*:focus {
    outline: none;
}

19
2017-10-10 20:43



Silakan gunakan sintaks berikut untuk menghapus perbatasan kotak teks dan menghapus perbatasan gaya browser yang disorot.

input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}

16
2018-05-08 08:55



Saya menemukan bahwa Anda juga dapat menggunakan:

input:focus{
   border: transparent;
}

10
2018-05-06 12:51



Set

input:focus{
    outline: 0 none;
}

"! Penting" hanya untuk berjaga-jaga. Itu tidak perlu. [Dan sekarang hilang. –Ed.]


9
2017-09-05 15:28



Ini pasti akan berhasil. Garis luar oranye tidak akan ditampilkan lagi .. Umum untuk semua tag:

*:focus {
    outline: none;
}

Khusus untuk beberapa tag, ex: tag input

input:focus {
   outline:none;
}

9
2018-04-19 06:51