como - borrar historial safari iphone

: la pseudo-clase activa no funciona en el safari móvil (11)

¿Estás usando todas las pseudo-clases o solo una? Si usa al menos dos, asegúrese de que estén en el orden correcto o que todos se rompan:

a:link a:visited a:hover a:active

..en ese orden. Además, si solo está usando: active, agregue un enlace, incluso si no lo está diseñando.

En Webkit en iPhone / iPad / iPod, la especificación del estilo para una: pseudoclase activa para una etiqueta <a> no se activa cuando toca el elemento. ¿Cómo puedo hacer que esto se dispare? Código de ejemplo:

<style> a:active { background-color: red; } </style>  <a href="#">Click me</a>

A partir del 8 de diciembre de 2016, la respuesta aceptada ( <body ontouchstart="">...</body> ) no funciona para mí en Safari 10 (iPhone 5s): ese truco solo funciona para aquellos elementos que fueron visibles en carga de página

Sin embargo, agregando:

<script type=''application/javascript''> document.addEventListener("touchstart", function() {}, false); </script>

a la head funciona de la manera que quiero, con la desventaja de que ahora todos los eventos táctiles durante el desplazamiento también activan el :active pseudo estado :active en los elementos tocados. (Si esto es un problema para ti, podrías considerar FighterJet''s :hover workaround).

Agregue un controlador de eventos para ontouchstart en su etiqueta <a>. Esto hace que CSS funcione mágicamente.

<a ontouchstart="">Click me</a>

Como han indicado otras respuestas, iOS Safari no desencadena la pesudo clase :active a menos que se haya asociado un evento táctil al elemento, pero hasta ahora este comportamiento ha sido "mágico". Me encontré con esta pequeña propaganda en la Biblioteca del desarrollador Safari que lo explica (el énfasis es mío):

También puede usar la propiedad CSS -webkit-tap-highlight-color en combinación con la configuración de un evento táctil para configurar los botones para que se comporten de manera similar al escritorio. En iOS, los eventos del mouse se envían tan rápido que nunca se recibe el estado activo o inactivo. Por lo tanto, el pseudo estado :active se activa solo cuando hay un evento táctil establecido en el elemento HTML; por ejemplo, cuando ontouchstart se establece en el elemento de la siguiente manera:
<button class="action" ontouchstart="" style="-webkit-tap-highlight-color: rgba(0,0,0,0);"> Testing Touch on iOS </button>
Ahora, cuando se toca y mantiene el botón en iOS, el botón cambia al color especificado sin que aparezca el color gris transparente circundante.

En otras palabras, establecer un evento ontouchstart (incluso si está vacío) le está diciendo explícitamente al navegador que reaccione a los eventos táctiles.

En mi opinión, este es un comportamiento defectuoso, y probablemente se remonta a la época en que la web "móvil" era básicamente inexistente (echa un vistazo a esas capturas de pantalla en la página vinculada para ver a qué me refiero), y todo estaba orientado al mouse. Es interesante observar que otros navegadores móviles más nuevos, como en Android, muestran pseudo-estado `: activo ''al tacto muy bien, sin ningún truco como el que se necesita para iOS.

(Nota: si desea usar sus propios estilos personalizados en iOS, también puede desactivar la casilla translúcida gris predeterminada que utiliza iOS en lugar del pseudo estado :active mediante el uso del -webkit-tap-highlight-color propiedad, como se explica en la misma página enlazada arriba).

Después de un poco de experimentación, la solución esperada de establecer un evento ontouchstart en el elemento <body> que tocan todos los eventos táctiles no funciona por completo. Si el elemento está visible en la ventana gráfica cuando se carga la página, funciona bien, pero desplazarse hacia abajo y tocar un elemento que estaba fuera de la ventana gráfica no :active pseudo estado :active como debería. Entonces, en lugar de

<!DOCTYPE html> <html><body ontouchstart></body></html>

adjunte el evento a todos los elementos en lugar de confiar en el evento burbujeando en el cuerpo (usando jQuery):

$(''body *'').on(''touchstart'', function (){});

Sin embargo, no estoy al tanto de las implicaciones de rendimiento de esto, así que ten cuidado.

EDITAR: Hay una falla grave con esta solución: incluso tocar un elemento mientras se desplaza por la página activará el pseudo estado :active . La sensibilidad es muy fuerte. Android soluciona esto presentando un retraso muy pequeño antes de que se muestre el estado, que se cancela si la página se desplaza. A la luz de esto, sugiero usar esto solo en elementos seleccionados. En mi caso, estoy desarrollando una aplicación web para usar en el campo, que es básicamente una lista de botones para navegar por las páginas y enviar acciones. Debido a que la página completa es más o menos botones en algunos casos, esto no funcionará para mí. Sin embargo, puede establecer el pseudo estado de :hover estacionario para completar. Después de deshabilitar el cuadro gris predeterminado, esto funciona perfectamente.

He publicado una herramienta que debería resolver este problema por ti.

En la superficie, el problema parece simple, pero en realidad el comportamiento de toque y clic debe personalizarse bastante extensamente, incluidas las funciones de tiempo de espera y cosas como "qué pasa cuando se desplaza una lista de enlaces" o "qué sucede cuando se presiona el enlace y luego mueva el mouse / dedo lejos del área activa "

Esto debería resolverlo todo de una vez: https://www.npmjs.com/package/active-touch

Deberá tener sus: estilos activos asignados a la clase .active o elegir su propio nombre de clase. Por defecto, el script funcionará con todos los elementos del enlace, pero puede sobrescribirlo con su propia selección de selectores.

Comentarios honestos, útiles y contribuciones muy apreciadas!

No 100% relacionado con esta pregunta, pero puedes usar css sibling hack para lograr esto también

HTML

<input tabindex="0" type="checkbox" id="145"/> <label for="145"> info</label> <span> sea</span>

SCSS

input { &:checked + label { background-color: red; } }

Si desea utilizar información sobre herramientas html / css pura

span { display: none; } input { &:checked ~ span { display: block; } }

Una solución es confiar en :target lugar de :active :

<style> a:target { background-color: red; } </style>  <a id="click-me" href="#click-me">Click me</a>

El estilo se activará cuando el anclaje sea el objetivo de la url actual, que es sólida incluso en dispositivos móviles. El inconveniente es que necesita otro enlace para borrar el ancla en la url. Ejemplo completo:

a:target { background-color: red; }

<a id="click-me" href="#click-me">Click me</a> <a id="clear" href="#">Clear</a>

This funciona para mí:

document.addEventListener("touchstart", function() {},false);

Nota: si haces este truco, también vale la pena eliminar el color tap-highlight predeterminado que Mobile Safari aplica con la siguiente regla CSS.

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

<body ontouchstart=""> ... </body>

Aplicado solo una vez, a diferencia de cada elemento de botón, parecía arreglar todos los botones de la página. Alternativamente, podría usar esta pequeña biblioteca JS llamada '' Fastclick ''. Acelera los eventos de clics en dispositivos táctiles y también se ocupa de este problema.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style> a{color: red;} a:hover{color: blue;} </style> </head> <body> <div class="main" role="main"> <a href="#">Hover</a> </div> </body> </html>

//hover for ios -webkit-tap-highlight-color: #ccc;

Esto funciona para mí, agregue a su CSS en el elemento que desea resaltar