[SOLUCIONADO] Efecto en touch de móvil

[El_Astur]

Buenas tardes,

he realizado una serie de imágenes que al clickear sobre cada una de ellas aparece una flecha que la marca como seleccionada. Lo he realizado con jQuery:

Código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
	$('a.options').click(function(){
	    $('a.options').removeClass("active");
	    $(this).addClass("active");
	    return false;
	});
</script>

El problema es que en móvil, al pulsar, hace un efecto como de aclarar la imagen una vez que se pulsa. He probado con el css:

Código:

.active{
	-webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: auto;
}
.active:before{
	width: 70px;
	height: 70px;
	position: absolute;
	right: 50%;
	margin-right: -45px;
	top: 50%;
	margin-top: -45px;
	content: url(img/ico-good.png);
}

El html es:

<ul>
<li class="app-cat">
<a href="#" class="options">
<img src="img/1.jpg" alt="1" />
<p class="name-cat"><span>1</span></p>
</a>
</li>
<li class="app-cat">
<a href="#" class="options">
<img src="img/2.jpg" alt="2" />
<p class="name-cat">2</p>
<!-- <img src="img/ico-good.png" alt="Good" class="good" /> -->
</a>
</li>
<li class="app-cat">
<a href="#" class="options">
<img src="img/3.jpg" alt="3" />
<p class="name-cat">3</p>
</a>
</li>
<li class="app-cat">
<a href="#" class="options">
<img src="img/4.jpg" alt="4" />
<p class="name-cat">4</p>
</a>
</li>
</ul>

Pero me sigue haciendo ese efecto, ¿alguien sabría a qué puede deberse?

Un saludo!!!