Nonaktifkan sorotan garis oranye pada fokus


106

Saya mengkodekan aplikasi menggunakan jQuery, jqTouch dan phonegap dan mengalami masalah terus-menerus yang muncul ketika pengguna mengirimkan formulir menggunakan tombol Buka pada keyboard lunak.

Meskipun mudah untuk mengarahkan kursor ke elemen masukan formulir yang sesuai dengan menggunakan $('#input_element_id').focus(), sorotan garis luar oranye selalu kembali ke elemen masukan terakhir pada formulir. (Sorotan tidak muncul saat formulir dikirimkan menggunakan tombol kirim formulir.)

Yang saya butuhkan adalah menemukan cara untuk menonaktifkan sorotan oranye sepenuhnya atau memindahkannya ke elemen input yang sama dengan kursor.

Sejauh ini, saya telah mencoba menambahkan yang berikut ini ke CSS saya:

.class_id:focus {
    outline: none;
}

Ini berfungsi di Chrome tetapi tidak di emulator atau di ponsel saya. Saya juga mencoba mengedit jqTouch theme.cssuntuk membaca:

ul li input[type="text"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); and
    -webkit-focus-ring-color:  rgba(0, 0, 0, 0);
}

Tanpa efek. Saya juga mencoba setiap tambahan berikut ke AndroidManifest.xmlfile:

android:imeOptions="actionNone"
android:imeOptions="actionSend|flagNoEnterAction"
android:imeOptions="actionGo|flagNoEnterAction"

Tidak ada satupun yang berpengaruh.

Pembaruan: Saya telah melakukan pemecahan masalah lagi dengan ini dan hingga saat ini telah menemukan:

  1. Properti garis batas hanya berfungsi di Chrome, bukan di browser Android.

  2. The -webkit-tap-highlight-colorproperti sebenarnya tidak bekerja pada browser Android, meskipun tidak pada Chrome. Ini menonaktifkan sorotan pada fokus serta mengetuk.

  3. The -webkit-focus-ring-colorproperti tampaknya tidak bekerja pada salah satu browser.

Jawaban:


210

Mencoba:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''

10
tidak bekerja dengan android 4.0.4 - ada yang pernah mengalami hal yang sama? (ini bekerja pada versi sebelumnya dan 4.1)
最 白 目

6
android 4.0.4 bekerja dengan: -webkit-user-modifikasikan: read-write-plaintext-only;
oori

@oori memang demikian, namun itu "merusak" iOS dengan menyebabkan keyboard muncul.
Maksimal

@Max, komentar Anda tidak jelas. di iOS - tentu saja keyboard akan muncul setelah Anda fokus ke input / textarea .. tolong jelaskan
oori

4
@o Oke? Itu tidak membantu dengan elemen non-textarea non-input, yang merupakan subjek komentar saya.
Maksimal

43

Bekerja di Android Default, Android Chrome dan iOS Safari 100%

* {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; 
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
    outline: none !important;
} 

1
ini harus menjadi jawaban yang dipilih
mlg87

Alih-alih menggunakan *Anda bisa menggunakan button, jika masalah Anda adalah dengan tombol misalnya.
Brian Burns

35
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
} 

di file css Anda. Itu berhasil untuk saya!


18

Hapus kotak oranye pada fokus input untuk Android

textarea:focus, input:focus{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
    -webkit-user-modify: read-write-plaintext-only;
}

tap-highlight-color untuk sebagian besar versi

modifikasi pengguna untuk 4.0.4


Telah mencari perbaikan [Android 4.1.2] selama beberapa hari sekarang. Ini satu-satunya yang berhasil. Terima kasih banyak!
cassi.lup

@Ben jawaban di atas pasti berhasil ... buat plunkr / jsfiddle dengan kode Anda, sehingga kami dapat melihat dan membantu Anda.
oori

@Ben user-modifikasikan untuk 4.0.4 bukanlah solusi yang baik untuk solusi lain jika Anda punya, silakan bagikan.
Amit

12

Coba untuk Garis Fokus

body, textarea:focus, input:focus{
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

Hanya solusi yang berfungsi untuk perangkat Android 4.2 dan serupa.
andreszs

10

Ketahuilah bahwa menggunakan CSS ini -webkit-user-modify: read-write-plaintext-only;AKAN menghapus 'bug' sorotan yang mengerikan itu - TETAPI dapat mematikan kemampuan perangkat Anda untuk menyediakan keyboard tertentu. Bagi kami yang menjalankan Android 4.0.3 pada Samsung Tab 2, kami tidak bisa lagi mendapatkan keyboard numerik. Bahkan menggunakan type = 'number' & / atau type = 'tel'. Sangat membuat frustasi! BTW, pengaturan tap highlight color tidak melakukan apa pun untuk menyelesaikan masalah ini untuk perangkat ini dan konfigurasi OS. Kami menjalankan Safari untuk android.


bagaimana Anda menjalankan Safari untuk android.
Amit

Hai @Amit, sudah lama sejak saya menjawab ini! itu hanya berjalan langsung dari perangkat sebagai standar pabrik saya akan mengatakan ... Tab2 cukup baru di pasaran pada saat itu.
Fivebears

7

Untuk memastikan tap-highlight-colorproperti yang diganti berfungsi untuk Anda, pertimbangkan hal-hal ini terlebih dahulu:

Tidak berfungsi:
-webkit-user-modified: read-write-plaintext-only;
// Terkadang memicu keyboard asli untuk muncul saat mengklik elemen

.class: aktif, .class: focus {-webkit-tap-highlight-color: rgba (0,0,0,0); }
// Ini tidak bekerja jika didefinisikan untuk negara bagian

Kerja:
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }

Kasing ini berfungsi untuk Android dari v2.3 hingga v4.x bahkan dalam aplikasi PhongeGap. Saya mengujinya di Galaxy Y dengan Android 2.3.3, di Nexus 4 dengan Android 4.2.2 dan di Galaxy Note 2 dengan Android 4.1.2. Jadi jangan mendefinisikannya untuk status hanya untuk elemen itu sendiri.


1
Tip inilah yang membuatnya bekerja untuk saya dengan WebView di Android 2.3.
dAngelov

WOOOOW Yang ini berhasil !! (Android 4.1.2) Sialan! Aku benci fragmentasi tampilan web !!
Seseorang di suatu tempat

6

Gunakan kode di bawah ini dalam file CSS

  * {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    :focus {
        outline: 0;
        border:none;
        color: rgba(0, 0, 0, 0);
    }

Ini bekerja untuk saya. Saya harap ini berhasil untuk Anda.


2

Ini tidak berfungsi untuk saya pada tautan Area Peta Gambar, satu-satunya solusi yang berfungsi adalah menggunakan javascript dengan menangkap acara ontouchend dan mencegah perilaku browser default dengan mengembalikan false pada penangan.

dengan jQuery:

$("map area").on("touchend", function() {
   return false;
});

2

Saya hanya ingin berbagi pengalaman saya. Saya tidak benar-benar membuat ini bekerja, dan saya ingin menghindari css- * yang lambat. Solusi saya adalah mengunduh Reset CSS v2.0 Eric Meyer yang lama ( http://meyerweb.com/eric/tools/css/reset/ ) dan menambahkan yang ini ke proyek phonegap saya. Saya kemudian menambahkan:

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /** Disable orange highlight */

Menurut pengalaman saya, ini adalah pendekatan yang lebih cepat ke *, tetapi juga merupakan pendekatan untuk bug yang tidak terlalu aneh. Kombinasi tap-highlight, -webkit-user-modifikasikan: read-write-plaintext-only dan penonaktifan, misalnya penyorotan teks, telah memberi kami banyak headaces. Salah satu yang terburuk adalah input keyboard tiba-tiba berhenti bekerja dan visualisasi keyboard lambat.

Selesaikan penyetelan ulang CSS dengan sorotan oranye dinonaktifkan:

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /** Disable orange highlight */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

1

Saya telah mencoba yang ini dan bekerja dengan baik: -

HTML: -

<a class="html5logo"  href="javascript:void(0);"  ontouchstart="return true;"></a>

css

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}
.html5logo:active {
  -webkit-transform: scale3d(0.9, 0.9, 1);
}

-webkit-tap-sorot-warna: transparan; -> hebat, diselesaikan untuk yaitu Nexus5 (Chrome) dan Kindle Fire HD 7 ''. Semua opsi lain tidak membantu untuk perangkat / browser ini. Berhati-hatilah, Firefox dan Opera tidak membutuhkan saluran di Nexus5.
Michael Biermann

1

Ini akan berfungsi tidak hanya untuk ketukan, tetapi juga untuk mengarahkan kursor:

button, button:hover, li:hover, a:hover , li , a , *:hover, * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

0
<EditText
            android:id="@+id/edittext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  
            android:background="@android:drawable/editbox_background_normal"                 

 />

0

Ini berfungsi untuk saya di Ionic, cukup taruh di file CSS untuk ditimpa

:focus {
    outline-width: 0px;
}

-1

Jika desain tidak menggunakan garis besar, ini harus dilakukan:

*, *::active, *::focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;
    -webkit-focus-ring-color: rgba(0, 0, 0, 0)!important;
    outline: none!important;
}

-1

Coba kode berikut yang menonaktifkan garis batas

garis besar: tidak ada! penting;

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.