CLICKING ON ANYTHING CREATE A BOX BORDER AROUND IT.

The box is coming from this CSS rule in style.css

a:focus {
    outline: solid 1px !important;
}

The color is coming from this rule Looks like something in woocommerce configuration.

element.style {
}
#site-logo #site-logo-inner a {
    background-color: transparent !important;
}
.woocommerce-MyAccount-navigation ul li a:before, .woocommerce-checkout .woocommerce-info a, .woocommerce-checkout #payment ul.payment_methods .wc_payment_method>input[type=radio]:first-child:checked+label:before, .woocommerce-checkout #payment .payment_method_paypal .about_paypal, .woocommerce ul.products li.product li.category a:hover, .woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product .product-inner .added_to_cart:hover, .product_meta .posted_in a:hover, .product_meta .tagged_as a:hover, .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover, .woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce .oceanwp-grid-list a.active, .woocommerce .oceanwp-grid-list a:hover, .woocommerce .oceanwp-off-canvas-filter:hover, .widget_shopping_cart ul.cart_list li .owp-grid-wrap .owp-grid a.remove:hover, .widget_product_categories li a:hover ~ .count, .widget_layered_nav li a:hover ~ .count, .woocommerce ul.products li.product:not(.product-category) .woo-entry-buttons li a:hover, a:hover, a.light:hover, .theme-heading .text::before, .theme-heading .text::after, #top-bar-content >a:hover, #top-bar-social li.oceanwp-email a:hover, #site-navigation-wrap .dropdown-menu >li >a:hover, #site-header.medium-header #medium-searchform button:hover, .oceanwp-mobile-menu-icon a:hover, .blog-entry.post .blog-entry-header .entry-title a:hover, .blog-entry.post .blog-entry-readmore a:hover, .blog-entry.thumbnail-entry .blog-entry-category a, ul.meta li a:hover, .dropcap, .single nav.post-navigation .nav-links .title, body .related-post-title a:hover, body #wp-calendar caption, body .contact-info-widget.default i, body .contact-info-widget.big-icons i, body .custom-links-widget .oceanwp-custom-links li a:hover, body .custom-links-widget .oceanwp-custom-links li a:hover:before, body .posts-thumbnails-widget li a:hover, body .social-widget li.oceanwp-email a:hover, .comment-author .comment-meta .comment-reply-link, #respond #cancel-comment-reply-link:hover, #footer-widgets .footer-box a:hover, #footer-bottom a:hover, #footer-bottom #footer-bottom-menu a:hover, .sidr a:hover, .sidr-class-dropdown-toggle:hover, .sidr-class-menu-item-has-children.active >a, .sidr-class-menu-item-has-children.active >a >.sidr-class-dropdown-toggle, input[type=checkbox]:checked:before {
    color: #ef3f49;
}

Thanks, how can I remove this?

you can try adding it to your custom CSS this should get rid of the box. The problem is the !important keyword added. If your new CSS rule comes before the old one it will not work. The last rule with important set will win. Also, this will remove the rule from all links in your theme. Right now all links have this rule attached to them.

The last rule set all your classes in woocommce with color: #ef3f49. You can probably leave it unchanged if you are ok with it. It affects the text color only.

a:focus {
    outline:none !important;
}

Hello,

How are you, I’m having the same issue also, I added the above code but did not correct the issue. Here is the affected URL https://www.watchurdiet.com/

Also, I’m using the oceanWP child theme, should I be adding the above code there? if yes, Where.

Ps. All Themes and Plugins are up to date.

Thank you.

Rich

Thank a lot @mrtom414 ?? ??