Cannot remove border from linked woocommerce product image

Question

I just updated a storefront theme to 2.5.5 for https://bestfamily.gr and I noticed that when I click to a product image or image link a border is displayed.

I put in my css

img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail.lazyloaded {
    text-decoration: none !important;
    border: 0 none !important;
}

or

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
    text-decoration: none !important;
    border: 0 none !important;
}

but still nothing. In the previous version of theme no border was shown I am using imagify and wp-rocket with lazyloading if this helps.

Answer 1

You have to change the :focus

Try this:

a:focus, button:focus, .button.alt:focus, input:focus, textarea:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus {
    outline-color: transparent;
}