Hapus Safari / Chrome textinput / textarea glow

Saya bertanya-tanya apakah mungkin untuk menghapus cahaya biru dan kuning default ketika saya mengklik input teks / area teks menggunakan CSS?

textarea, select, input, button { outline: none; }

Meskipun, telah diperdebatkan bahwa menjaga cahaya / garis sebenarnya bermanfaat untuk aksesibilitas karena dapat membantu pengguna melihat Elemen mana yang saat ini fokus.

Anda juga dapat menggunakan elemen pseudo ': fokus' untuk hanya menargetkan input ketika pengguna memilihnya.

Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

Efek ini dapat terjadi pada elemen non-input juga. Saya telah menemukan karya-karya berikut sebagai solusi yang lebih umum

:focus {
  outline-color: transparent;
  outline-style: none;
}

Pembaruan: Anda mungkin tidak harus menggunakan :focuspemilih. Jika Anda memiliki elemen, katakanlah <div id="mydiv">stuff</div>, dan Anda mendapatkan cahaya luar pada elemen div ini, cukup gunakan seperti biasa:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

Tentang pengubahan ukuran teks di browser berbasis webkit:

Pengaturan max-height dan max-width pada textarea tidak akan menghapus pegangan ukuran visual. Mencoba:

resize: none;

(dan ya saya setuju dengan "mencoba untuk menghindari melakukan apa pun yang merusak harapan pengguna", tetapi kadang-kadang itu masuk akal, yaitu dalam konteks aplikasi web)

Untuk menyesuaikan tampilan dan nuansa elemen formulir webkit dari awal:

-webkit-appearance: none;

Carl W :

Efek ini dapat terjadi pada elemen non-input juga. Saya telah menemukan karya-karya berikut sebagai solusi yang lebih umum

:focus {
  outline-color: transparent;
  outline-style: none;
}

Saya akan menjelaskan ini:

• :focusberarti menata elemen yang fokus. Jadi kami menata elemen dalam fokus.
• outline-color: transparent; berarti cahaya biru transparan.
• outline-style: none; melakukan hal yang sama.

Saya mengalami ini pada acara divyang memiliki klik dan setelah 20 pencarian, saya menemukan potongan ini yang menyelamatkan hari saya.

-webkit-tap-highlight-color: rgba(0,0,0,0);

Ini menonaktifkan penyorotan tombol default di browser mobile webkit

Ini adalah solusi untuk orang yang peduli dengan aksesibilitas .

Tolong, jangan gunakan outline:none;untuk menonaktifkan garis fokus. Anda mematikan aksesibilitas web jika melakukan ini. Ada cara yang dapat diakses untuk melakukan ini.

Lihat artikel ini yang telah saya tulis untuk menjelaskan cara menghapus perbatasan dengan cara yang dapat diakses.

Ide singkatnya adalah untuk hanya menunjukkan batas garis ketika kami mendeteksi pengguna keyboard. Setelah pengguna mulai menggunakan tetikusnya, kami menonaktifkan garis besarnya. Hasilnya, Anda mendapatkan yang terbaik dari keduanya.

Jika Anda ingin menghapus cahaya dari tombol di Bootstrap (yang menurut saya tidak buruk), Anda memerlukan kode berikut:

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}

Solusi ini bekerja untuk saya.

input:focus {
    outline: none !important;
    box-shadow: none !important;
}

beberapa kali itu terjadi tombol juga kemudian gunakan di bawah ini untuk menghapus garis luar

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}

<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>

Saya menemukan itu membantu untuk menghapus garis pada jenis "pintu geser" tombol input, karena garis besar tidak menutupi "tutup" kanan dari gambar pintu geser membuat keadaan fokus terlihat sedikit miring.

input.slidingdoorbutton:focus { outline: none;}

Saya hanya perlu menghapus efek ini dari bidang input teks saya, dan saya tidak bisa mendapatkan teknik lain untuk bekerja dengan benar, tetapi inilah yang bekerja untuk saya;

input[type="text"], input[type="text"]:focus{
            outline: 0;
            border:none;
            box-shadow:none;

    }

Diuji di Firefox dan di Chrome.

Tentu! Anda dapat menghapus batas biru juga dari semua elemen HTML menggunakan *

*{
    outline-color: transparent;
    outline-style: none;
  }

Dan

 *{
     outline: none;   
   }