Links do not change color on click or touch in Safari

Sparkling
1

Is there any way to make links change color when clicked (desktop) or pressed (mobile) in Safari?

I’ve styled the :focus element to change color, and this does work in Firefox and Chrome.

There’s not much to find around the web on this topic, although I have found this: http://stackoverflow.com/questions/28167688/how-to-show-afocus-color-and-outline-in-safari

There’s also a javascript plugin called Fastclick that’s supposed to address the issue, if it is in fact related to click delay: https://ftlabs.github.io/fastclick/

Any thoughts, or do we have to live with links not changing color in Safari and all Apple devices?

2

Hi @slobjones,

Thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS



#page a:visited {
    color: #2e9e4d;
}

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

Best Regards,
Movin

3

Movin, that changes the color of visited links, which is useful, but it does not change the link color as you touch or click the link.

That’s the ongoing issue with Safari. It’s not recognizing the focus selector.

Thanks!

4

If it is not hover or visited effect of link then i am not sure which link effect you are talking about so please describe it a bit more in detail with an example.

5

As I said, it’s the CSS focus selector. I’m surprised you’re not familiar with it.

http://www.w3schools.com/cssref/sel_focus.asp

6

I am familiar with the :focus CSS pseudo-class but i think you don’t know that it generally used with form fields and not on clicking on the links which you said above.

Please share me any example where this pseudo-class is used on clicking on the links without using any javascript code.