Cara memindahkan fokus border (garis besar) di sekitar teks/kotak input? (Chrome)

Adakah yang bisa menjelaskan bagaimana untuk menghapus oranye atau biru border (garis besar) di sekitar teks/kotak input? Saya pikir itu hanya terjadi pada Chrome untuk menunjukkan bahwa input box aktif. Berikut ini's atas masukan CSS saya'm menggunakan:

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

party-ring
Pertanyaan edit 1 Agustus 2019 в 4:59
Pemrograman
google-chrome focus css input border
3 Agustus 2010 в 1:49
103 tayangan
Mengomentari pertanyaan (4)
Larutan

Perbatasan ini digunakan untuk menunjukkan bahwa unsur ini terfokus (yaitu anda dapat mengetikkan input atau tekan tombol Enter). Anda dapat menghapus itu, meskipun:

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

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

Chrome juga akan berlaku untuk menyoroti unsur-unsur lain seperti DIV's digunakan sebagai modals. Untuk mencegah sorot pada orang-orang dan semua elemen lainnya juga, dapat anda lakukan:

*:focus {
    outline: none;
}
Chuck Le Butt
Jawaban edit 5 Januari 2016 в 8:34
Komentar (16)

Saat ini jawaban didn't bekerja untuk saya dengan Bootstrap 3.1.1. Berikut ini's apa yang saya harus meng-override:

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}
Komentar (5)
 
input:focus {
    outline:none;
}

Ini yang akan dilakukan. Orange outline won't muncul lagi.

hichris123
Jawaban edit 14 Desember 2015 в 12:31
Komentar (3)
<input style="border:none" >

Bekerja dengan baik bagi saya. Berharap untuk memilikinya tetap dalam html itu sendiri ... :)

Kailas
Jawaban edit 3 September 2018 в 11:42
Komentar (5)

I've menemukan solusi. Aku digunakan: outline:none; di CSS dan tampaknya telah bekerja. Terima kasih untuk bantuan pula. :)

Komentar (2)

Solusi

*:focus {
    outline: 0;
}

PS: Gunakan outline:0, bukan outline:none pada fokus. It's valid dan praktek yang lebih baik.

BSMP
Jawaban edit 16 Juli 2017 в 3:31
Komentar (1)

ini menghapus bingkai oranye di chrome dari semua dan setiap elemen tidak peduli apa dan di mana itu

*:focus {
    outline: none;
}
Komentar (0)

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

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

Set 

input:focus{
    outline: 0 none;
}

"!penting" hanya dalam kasus. Yang's tidak diperlukan. [Dan sekarang itu's pergi. –Ed.]

Ivanka Todorova
Jawaban edit 15 September 2015 в 2:28
Komentar (2)

Ini pasti akan berhasil. Orange garis besar tidak akan muncul lagi.. Umum untuk semua kategori:

*:focus {
    outline: none;
}

Khusus untuk beberapa tag, ex: tag input

input:focus {
   outline:none;
}
hichris123
Jawaban edit 14 Desember 2015 в 12:32
Komentar (0)

Saya tahu bahwa anda juga dapat menggunakan:

input:focus{
   border: transparent;
}
Komentar (0)