Link click shows black rectangle

  • dogdaysofsummer

    (@dogdaysofsummer)


    5 years, 4 months ago

    Hi,

    we updated a few of our plugins yesterday and since then everytime a link is clicked a black rectangle appears around the link.

    Does anyone know how to remove this?

    Thanks so much in advance!

    Best,
    Diana

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Ian Sackofwits

    (@plantprogrammer)

    5 years, 4 months ago

    Hey, dogdaysofsummer, it looks like you have some CSS that was added which is responsible for that outline:

    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: #232323;
}

    Just keep in mind though as this page says, that the outline is good to keep for people who “can’t use a mouse or have a visual impairment. If you remove the outline you are making your site inaccessible for these people.” – http://www.outlinenone.com/

    Anyways, you can use this rule with any selector that you wish:

    outline: 0;

    Example, you only want to remove the border with links:

    a:focus
{
outline: 0 !important;
}

    To edit CSS: https://wordpress.org/support/article/appearance-customize-screen/#additional-css

    • This reply was modified 5 years, 4 months ago by Ian Sackofwits. Reason: More info relevant to CSS
    Thread Starter dogdaysofsummer

    (@dogdaysofsummer)

    5 years, 4 months ago

    Hi Ian,

    thank you so much for your reply and all the great tips! However, I tried adding your piece of code and nothing happened. Do you have another tip or did I just do something wrong?

    Thanks so much!

    Ian Sackofwits

    (@plantprogrammer)

    5 years, 4 months ago

    Hey, dogdaysofsummer, I think you’re using the Storefront theme so I would direct you to what they recommend for removing the border box: https://docs.woocommerce.com/document/remove-the-box-around-active-links/

    Thread Starter dogdaysofsummer

    (@dogdaysofsummer)

    5 years, 4 months ago

    Thank you so much!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Link click shows black rectangle’ is closed to new replies.

Tags