contorni: nessuno; NON FUNZIONA - Solo -webkit-aspetto: nessuno; sta funzionando - cosa c'è di sbagliato qui?

Question

Modifica: Le mie preoccupazioni riguardano i siti web per dispositivi mobili.

Lasciatemi andare al punto. Non importa cosa faccio, contorno: nessuno; NON rimuove alcun evidenziamento/luce di default dagli elementi del modulo di input utilizzando un Ipod Touch/Iphone.

ovunque guardo, la gente dice di usare:

input:focus { 
outline:none; 
} 

o

input { 
outline:none; 
} 

.... e che questo rimuoverà il bagliore .... beh non è così.

Un altro problema importante è che non c'è NESSUNA LUCE DEFAULT. Creo una pagina vuota senza stile e solo un input di modulo, visualizzo la pagina tramite IOS mobile e non c'è alcun bagliore/contorno sugli elementi di input ... è solo vuoto.

L'unica cosa che funziona è usare -webkit-appearance: none; - e questo mi permette semplicemente di impostare un'ombra di casella sull'elemento di input. Se non sto usando l'aspetto -webkit: none; - quindi l'ombra del riquadro non verrà visualizzata correttamente.

Durante la visualizzazione su un browser desktop, tuttavia, le ombre di riquadro funzionano correttamente anche senza webkit.

Quindi la mia domanda è: perché contorni: nessuno; non servire a nulla sugli elementi di input? Ho visto alcune persone dire che lavorano solo sui tag di ancoraggio, mentre altri dicono che lavorano sugli elementi di input. Chi è qui? Perché finora, non importa quello che faccio, delineare: nessuno; è privo di valore sugli elementi di input.

Ecco un JSfiddle:

http://jsfiddle.net/QQGnj/4/show/

visualizzazione di questa pagina su iOS cellulare, non v'è alcuna "glow" o stile predefinito per cominciare. Dove tutti stanno vedendo il comportamento di luce di default che richiede un contorno: nessuno; lavorare (cosa che non fa)? Questo mi sta facendo impazzire!

Answer 1

Mobile Safari a quanto pare non ha uno stile predefinito outline, quindi non devi preoccuparti di questo. Per un look coerente garantito in tutti i browser, desktop e mobile, ti consiglio comunque di impostare outline: none comunque.

Answer 2

a, :visited{ 
    outline: 0; 
    outline: none; 
} 
:hover, :active, :focus{ 
    outline: 0; 
    outline: none; 
} 

rimosso il bagliore focalizzata per me su Chrome/osx, iPhone/Safari Mobile, firefox/osx http://jsfiddle.net/toniehock/QQGnj/6/show

Answer 3

Se si utilizza outline:none; si prega di aggiungere uno stile di messa a fuoco. Vedi http://outlinenone.com/.

Questa funzione è molto utile quando non viene utilizzato un mouse. Outline fornisce un'importante funzione di accessibilità, quindi per favore, se devi rimuoverlo, aggiungi uno stile per il tuo link focus e stati attivi. Si prega di aiutare gli utenti a capire dove esistono i collegamenti.

Answer 4

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

Answer 5

Usa -webkit-appearance: none;

#yourElement:focus { 
    -webkit-appearance: none; 
} 

#yourElement:hover { 
    -webkit-appearance: none; 
} 

E lo farà il trucco.