Cara Menghapus Garis Perbatasan Dari Tombol Input

ketika klik di tempat lain batasnya menghilang, mencoba onfocus none, tetapi tidak membantu, bagaimana cara membuat batas tombol jelek menghilang saat klik?

input[type="button"] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
}

<input type="button" value="Example Button">

menggunakan garis besar: tidak ada; kita dapat menghapus perbatasan itu di chrome

<style>
input[type="button"]
{
    width:120px;
    height:60px;
    margin-left:35px;
    display:block;
    background-color:gray;
    color:white;
    border: none;
    outline:none;
}
</style>

Garis fokus di Chrome dan FF

dihapus:

input[type="button"]{
   outline:none;
}
input[type="button"]::-moz-focus-inner {
   border: 0;
}

Demo

Aksesibilitas (A11Y)

/* Don't forget! User accessibility is important */
input[type="button"]:focus {
  /* your custom focused styles here */
}

Ini bekerja untuk saya secara sederhana :)

*:focus {
    outline: 0 !important;
}

Yang ini berhasil untuk saya

button:focus {
    border: none;
    outline: none;
}

The outlineproperti adalah apa yang Anda butuhkan. Ini singkatan untuk menyetel setiap properti berikut dalam satu deklarasi:

• outline-style
• outline-width
• outline-color

Anda bisa menggunakan outline: none;, yang disarankan dalam jawaban yang diterima. Anda juga bisa lebih spesifik jika Anda ingin:

button {
    outline-style: none;
}

button:focus{outline:none !important;}

tambahkan !importantjika digunakan di Bootstrap

Set kedua outlinedan box-shadowsifat dari tombol untuk nonedan membuat mereka penting .

input[type="button"] {
    outline: none !important;
    box-shadow: none !important;
} 

Alasan untuk menyetel nilai menjadi penting adalah, jika Anda menggunakan pustaka atau kerangka kerja CSS lain seperti Bootstrap, ini mungkin akan diganti.

Untuk menghindari masalah yang ditimbulkan ketika Anda mengubah properti outline pada sebuah fokus, adalah memberikan efek visual ketika pengguna Tab pada tombol input atau mengkliknya.

Dalam hal ini adalah jenis kirim, tetapi Anda juga dapat menerapkan ke type = "button".

input[type="submit"]:focus {
    outline: none !important;
    background-color: rgb(208, 192, 74);
}

Ini sangat sederhana dari yang Anda pikirkan. Saat tombol difokuskan, terapkan outlineproperti, seperti ini:

button:focus {
    outline: 0 !important;
}

Tetapi ketika saya menggunakan nonenilai, itu tidak berhasil untuk saya.

Menghapus acara yang dapat diakses nessorry bukanlah ide yang baik untuk pengembangan web standar. Bagaimanapun juga jika Anda mencari solusi, menghapus garis besar saja tidak menyelesaikan masalah. Anda juga harus menghilangkan bayangan warna biru. untuk skenario tertentu gunakan nama kelas terpisah untuk mengisolasi gaya khusus ini ke tombol Anda.

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

Lebih baik lakukan ini

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

Menghapus garis luar adalah mimpi buruk aksesibilitas. Orang yang melakukan tab menggunakan keyboard tidak akan pernah tahu item apa yang mereka gunakan.

Sebaiknya tinggalkan saja, karena sebagian besar tombol yang diklik akan membawa Anda ke suatu tempat, atau jika Anda HARUS menghapus garis luarnya, maka pisahkan dengan nama kelas tertentu.

.no-outline {
  outline: none;
}

Kemudian Anda dapat menerapkan kelas itu kapan pun Anda perlu.

Diberikan html di bawah ini:

<button class="btn-without-border"> Submit </button>

Dalam gaya css lakukan hal berikut:

.btn-without-border:focus {
    border: none;
    outline: none;
}

Kode ini akan menghapus batas tombol dan akan menonaktifkan fokus batas tombol saat tombol diklik.

Seperti yang telah disebutkan banyak orang, selector:focus {outline: none;}akan menghapus batas itu tetapi batas itu adalah fitur aksesibilitas utama yang memungkinkan pengguna papan ketik menemukan tombol dan tidak boleh dihapus.

Karena perhatian Anda tampaknya pada estetika, Anda harus tahu bahwa Anda dapat mengubah warna, gaya, dan lebar garis luar, membuatnya lebih cocok dengan gaya situs Anda.

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

Steno:

selector:focus {
  outline: 1px dashed red;
}