Wyłącz pomarańczowe wyróżnienie konturu na fokusie

106

Koduję aplikację za pomocą jQuery, jqTouch i phonegap i napotkałem trwały problem, który pojawia się, gdy użytkownik przesyła formularz za pomocą przycisku Go na klawiaturze programowej.

Chociaż użycie kursora do odpowiedniego elementu wejściowego formularza jest łatwe $('#input_element_id').focus(), pomarańczowe wyróżnienie konturu zawsze powraca do ostatniego elementu wejściowego w formularzu. (Podświetlenie nie pojawia się, gdy formularz jest przesyłany za pomocą przycisku przesyłania formularza).

To, czego potrzebuję, to znaleźć sposób na całkowite wyłączenie pomarańczowego podświetlenia lub przeniesienie go do tego samego elementu wejściowego, co kursor.

Do tej pory próbowałem dodać do mojego CSS:

.class_id:focus {
    outline: none;
}

To działa w Chrome, ale nie w emulatorze ani na moim telefonie. Próbowałem również edytować jqTouch, theme.cssaby przeczytać:

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

Bez skutku. Wypróbowałem również każdy z następujących dodatków do AndroidManifest.xmlpliku:

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

Żadne z nich nie ma żadnego efektu.

Aktualizacja: zrobiłem więcej rozwiązywania problemów z tym i do tej pory znalazłem:

  1. Właściwość zarys działa tylko w przeglądarce Chrome, a nie w przeglądarce Android.

  2. -webkit-tap-highlight-colorNieruchomość ma w rzeczywistości pracy na Android przeglądarki, choć nie na Chrome. Wyłącza podświetlenie na fokusie, a także po dotknięciu.

  3. Ta -webkit-focus-ring-colorwłaściwość nie działa w żadnej z przeglądarek.

Eggdeng
źródło

Odpowiedzi:

210

Próbować:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''
Baggz
źródło
10
nie działa z Androidem 4.0.4 - ktoś doświadczył tego samego? (działa na poprzednich wersjach i 4.1)
最 白 目
6
Android 4.0.4 współpracuje z: -webkit-user-modyfikacja: tylko do odczytu i zapisu w postaci zwykłego tekstu;
oori
@oori robi, jednak „psuje” iOS, powodując wyskakiwanie klawiatury.
Maksymalnie
@Max, Twój komentarz nie jest jasny. w systemie iOS - oczywiście klawiatura wyskakuje, gdy skupisz się na obszarze wprowadzania /
tekstu
4
@oori Okay? To nie pomaga w przypadku elementów niebędących danymi wejściowymi, które były przedmiotem mojego komentarza.
Maksymalnie
43

Pracuj na Androidzie Default, Android Chrome i 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;
} 
sergey_c
źródło
1
to powinna być wybrana odpowiedź
mlg87
Zamiast używać *, możesz po prostu użyć button, jeśli problem dotyczy na przykład przycisków.
Brian Burns
35
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
} 

w pliku css. U mnie zadziałało!

tak
źródło
18

Usuń pomarańczowe pole na fokusie wprowadzania danych w przypadku Androida

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

dotknij-podświetl-kolor dla większości wersji

modyfikacja użytkownika dla 4.0.4

oori
źródło
Od kilku dni szukam rozwiązania [Android 4.1.2]. To jedyny, który zadziałał. Wielkie dzięki!
cassi.lup
@Ben powyższa odpowiedź na pewno działa ... zrób plunkr / jsfiddle ze swoim kodem, abyśmy mogli Cię zobaczyć i pomóc.
oori
@Ben user-modyfikacja dla 4.0.4 nie jest dobrym rozwiązaniem żadne inne rozwiązanie, jeśli masz, a następnie udostępnij je.
Amit
12

Spróbuj Focus Line

body, textarea:focus, input:focus{
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
Ravi Desai
źródło
Jedyne działające rozwiązanie dla urządzeń z Androidem 4.2 i podobnych.
andreszs
10

Należy pamiętać, że użycie tego CSS -webkit-user-modify: read-write-plaintext-only;spowoduje usunięcie tego okropnego `` błędu '' podświetlenia - ALE może to zabić zdolność urządzenia do zapewnienia określonej klawiatury. W przypadku systemu Android 4.0.3 na karcie Samsung Tab 2 nie mogliśmy już uzyskać klawiatury numerycznej. Nawet używając type = 'number' i / lub type = 'tel'. Bardzo frustrujące! BTW, ustawienie koloru podświetlenia kranu nie pomogło w rozwiązaniu tego problemu dla tego urządzenia i konfiguracji systemu operacyjnego. Używamy Safari dla Androida.

Fivebears
źródło
jak używasz Safari dla Androida.
Amit
Hej @Amit, minęło dużo czasu, odkąd na to odpowiedziałem! Po prostu wyskakiwał prosto z urządzenia jako standard fabryczny, powiedziałbym ... Tab2 był wtedy całkiem nowy na rynku.
Fivebears
7

Aby upewnić się, że tap-highlight-colornadpisywanie właściwości działa w Twoim przypadku, rozważ najpierw następujące kwestie:

Nie działa:
-webkit-user-modyfikacja: tylko do odczytu i zapisu w postaci zwykłego tekstu;
// Czasami wywołuje wyskakującą klawiaturę natywną po kliknięciu elementu

.class: aktywna, .class: focus {-webkit-tap-highlight-color: rgba (0,0,0,0); }
// To nie działa, jeśli jest zdefiniowane dla stanów

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

Ten przypadek działa na Androida od v2.3 do v4.x, nawet w aplikacji PhongeGap. Testowałem go na Galaxy Y z Androidem 2.3.3, na Nexusie 4 z Androidem 4.2.2 i na Galaxy Note 2 z Androidem 4.1.2. Więc nie definiuj tego dla stanów tylko dla samego elementu .

RynoRn
źródło
1
Ta wskazówka sprawiła, że ​​zadziałało to dla mnie z WebView w systemie Android 2.3.
dAngelov
WOOOOW Ten działał !! (Android 4.1.2) Cholera! Nienawidzę fragmentacji stron internetowych !!
Someone Somewhere
6

Użyj poniższego kodu w pliku CSS

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

To dla mnie praca. Mam nadzieję, że to zadziała.

Kailas
źródło
2

To nie zadziałało w przypadku linków do obszaru mapy obrazu, jedynym działającym rozwiązaniem było użycie javascript, przechwytując zdarzenie ontouchend i zapobiegając domyślnemu zachowaniu przeglądarki, zwracając false w module obsługi.

z jQuery:

$("map area").on("touchend", function() {
   return false;
});
Roberto Andrade
źródło
2

Chciałem tylko podzielić się swoim doświadczeniem. Tak naprawdę to nie zadziałało i chciałem uniknąć powolnego css- *. Moim rozwiązaniem było pobranie starego dobrego Erica Meyera Reset CSS v2.0 ( http://meyerweb.com/eric/tools/css/reset/ ) i dodanie tego do mojego projektu phonegap. Następnie dodałem:

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

Z mojego doświadczenia wynika, że ​​jest to szybsze podejście do *, ale jest to również podejście do mniej dziwnych błędów. Kombinacja tap-highlight, -webkit-user-modyfikacja: tylko do odczytu-zapisu-zwykłego tekstu i wyłączenie na przykład podświetlania tekstu dostarczyło nam wielu informacji. Jednym z najgorszych jest to, że nagle przestaje działać wprowadzanie z klawiatury i powolna wizualizacja klawiatury.

Zakończ resetowanie CSS z wyłączonym pomarańczowym podświetleniem:

/**
 * 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;
}
Sindre
źródło
1

Wypróbowałem ten i działało dobrze: -

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);
}
Ashoka Mondal
źródło
-webkit-tap-highlight-color: przezroczysty; -> świetnie, rozwiązałem to np. dla Nexusa5 (Chrome) i Kindle Fire HD 7 ''. Wszystkie inne opcje nie pomogły w przypadku tych urządzeń / przeglądarki. Uważaj, Firefox i Opera nie potrzebowały linii na Nexus5.
Michael Biermann
1

To zadziała nie tylko w przypadku kranów, ale także najechania kursorem:

button, button:hover, li:hover, a:hover , li , a , *:hover, * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
abksharma
źródło
0
<EditText
            android:id="@+id/edittext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  
            android:background="@android:drawable/editbox_background_normal"                 

 />
Android
źródło
0

Ta praca dla mnie w Ionic, po prostu wstaw plik CSS do nadpisania

:focus {
    outline-width: 0px;
}
Podstawy śnieżne
źródło
-1

Jeśli projekt nie używa konturów, powinno to wystarczyć:

*, *::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;
}
Robert Richter
źródło
-1

Spróbuj wykonać poniższy kod, który wyłącza kontur obramowania

zarys: brak! ważne;

lodowisko
źródło