Cara Menghapus Garis Perbatasan Dari Tombol Input


139

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


terlihat baik-baik saja di browser mozilla saya
Drixson Oseña

1
Persegi panjang fokus seharusnya membantu pengguna mengamati bahwa klik itu efektif dan dengan demikian mencegahnya mengklik dua kali secara tidak sengaja. Jadi, apakah Anda yakin sedang memecahkan masalah dan tidak membuatnya?
Jukka K. Korpela

Jawaban:


194

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>

19
Di Chrome, saya harus menambahkan outline: none;aturan ke input[type="button"]:focusdaripada input[type="button"].
Sung Cho

@SungCho: Terima kasih. Metode Anda membantu saya.
priyamtheone

76

Garis fokus di Chrome dan FF

masukkan deskripsi gambar di sini masukkan deskripsi gambar di sini

dihapus:

masukkan deskripsi gambar di sini

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

54

Ini bekerja untuk saya secara sederhana :)

*:focus {
    outline: 0 !important;
}

1
Ini adalah satu-satunya jawaban yang berhasil bagi saya, tetapi bagaimana Anda akan melakukannya tanpa! Penting? Saya telah mendengar dari banyak sumber bahwa Anda sebaiknya hanya menggunakannya jika benar-benar diperlukan.
Jay

Saya melakukan gaya tombol ini untuk seluruh aplikasi di css eksternal. Jika Anda ingin mengabaikannya, Anda dapat melakukannya dengan #id di css menggunakan itu di setiap tombol: # button-tyle {outline: 0; } atau gunakan gaya yang sama untuk semua tombol tanpa #id di setiap tombol, berikut ini tautan demo : input [type = "button"] {width: 70px; tinggi: 30px; margin kiri: 72px; margin-top: 15px; tampilan: blok; warna-latar belakang: abu-abu; warna putih; batas: tidak ada; garis besar: 0; }
X-Coder

19

Yang ini berhasil untuk saya

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

14

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


5

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.


4

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


3

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.


3

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

2

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.


2

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.


2

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