Disattiva l'evidenziazione del contorno arancione sullo stato attivo

Sto codificando un'app utilizzando jQuery, jqTouch e phonegap e ho riscontrato un problema persistente che si verifica quando un utente invia un modulo utilizzando il pulsante Vai sulla tastiera virtuale.

Sebbene sia facile spostare il cursore sull'elemento di input del modulo appropriato utilizzando $('#input_element_id').focus(), l'evidenziazione del contorno arancione ritorna sempre all'ultimo elemento di input del modulo. (L'evidenziazione non viene visualizzata quando il modulo viene inviato utilizzando il pulsante di invio del modulo.)

Quello di cui ho bisogno è trovare un modo per disabilitare completamente l'evidenziazione arancione oppure per spostarlo sullo stesso elemento di input del cursore.

Finora, ho provato ad aggiungere quanto segue al mio CSS:

.class_id:focus {
    outline: none;
}

Funziona in Chrome ma non sull'emulatore o sul mio telefono. Ho anche provato a modificare jqTouch theme.cssper leggere:

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

Senza alcun effetto. Ho anche provato ciascuna delle seguenti aggiunte al AndroidManifest.xmlfile:

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

Nessuno dei quali ha alcun effetto.

Aggiornamento: ho risolto un po 'di più con questo e fino ad oggi ho trovato:

1. La proprietà outline funziona solo su Chrome, non sul browser Android.

2. La -webkit-tap-highlight-colorproprietà infatti funziona sul browser Android, anche se non su Chrome. Disattiva l'evidenziazione sulla messa a fuoco e sul tocco.

3. La -webkit-focus-ring-colorproprietà non sembra funzionare su entrambi i browser.

Provare:

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

Lavora su Android predefinito, Android Chrome e iOS Safari al 100%

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

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

nel tuo file css. Ha funzionato per me!

Rimuovere la casella arancione sullo stato attivo dell'input per Android

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

tap-highlight-color per la maggior parte delle versioni

modifica utente per 4.0.4

Prova per Focus Line

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

Tieni presente che l'utilizzo di questo CSS -webkit-user-modify: read-write-plaintext-only;rimuoverà quell'orribile "bug" di evidenziazione, MA potrebbe uccidere la capacità dei tuoi dispositivi di fornire una tastiera specifica. Per noi che eseguiamo Android 4.0.3 su un Samsung Tab 2, non siamo più riusciti a ottenere la tastiera numerica. Anche usando type = 'number' & / o type = 'tel'. Molto frustrante! A proposito, l'impostazione del colore di evidenziazione del tocco non ha risolto questo problema per questo dispositivo e la configurazione del sistema operativo. Stiamo eseguendo Safari per Android.

Per assicurarti che l' tap-highlight-coloroverride della proprietà funzioni per te, considera prima queste cose:

Non funziona:
-webkit-user-modify: read-write-plaintext-only;
// A volte attiva il popup della tastiera nativa quando si fa clic sull'elemento

.class: attivo, .class: focus {-webkit-tap-highlight-color: rgba (0,0,0,0); }
// Non funziona se definito per gli stati

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

Questo caso funziona per Android dalla v2.3 alla v4.x anche in un'applicazione PhongeGap. L'ho provato su Galaxy Y con Android 2.3.3, su Nexus 4 con Android 4.2.2 e su Galaxy Note 2 con Android 4.1.2. Quindi non definirlo per gli stati solo per l'elemento stesso.

Usa il codice seguente nel file CSS

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

È lavoro per me. Spero che funzioni per te.

Questo non ha funzionato per me sui collegamenti dell'area mappa immagine, l'unica soluzione funzionante era utilizzare javascript catturando l'evento ontouchend e impedendo il comportamento del browser predefinito restituendo false sul gestore.

con jQuery:

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

Volevo solo condividere la mia esperienza. Non riuscivo davvero a far funzionare tutto questo e volevo evitare il lento css- *. La mia soluzione era scaricare il buon vecchio Reset CSS v2.0 di Eric Meyer ( http://meyerweb.com/eric/tools/css/reset/ ) e aggiungere questo al mio progetto phonegap. Ho poi aggiunto:

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

Nella mia esperienza questo è un approccio più veloce a *, ma è anche un approccio a bug meno strani. La combinazione di tap-highlight, -webkit-user-modify: read-write-plaintext-only e la disabilitazione, ad esempio, dell'evidenziazione del testo ci hanno fornito molti headaces. Uno dei peggiori è che improvvisamente l'input da tastiera smette di funzionare e la visualizzazione da tastiera lenta.

Ripristino CSS completo con l'evidenziazione arancione disabilitata:

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

Ho provato questo e ha funzionato bene: -

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

Funzionerà non solo per i tocchi, ma anche per il passaggio del mouse:

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

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

 />

Questo funziona per me in Ionic, basta inserirlo nel file CSS per sovrascriverlo

:focus {
    outline-width: 0px;
}

Se il design non utilizza i contorni, questo dovrebbe funzionare:

*, *::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;
}

Prova a seguire il codice che disabilita il contorno del bordo

schema: nessuno! importante;