How can I remove the outline around quantity and variant boxes when selected?

Hello.

Could someone help with info on how to remove the black outline around the quantity/variant boxes when selected?

Please and thank you.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .pdp-layout .pdp-details .variant-option select:focus {
  
    outline : unset;
    
    }
    
  </style>

Let us know how it goes.

10 hours ago, freshlydiced said:

Could someone help with info on how to remove the black outline around the quantity/variant boxes when selected?

The "how to" has already been provided above by @creedon but, as I do not recommend this approach, I wanted to explain why and add some context for anyone reading this thread in the future.

This "focus outline" is an important accessibility feature that helps visitors with vision and movement disabilities and other disorders. It adds a contrasting black (or white) outline to the area of the page that has focus so they can track where they are.

Removing focus outlines can create issues for users with disabilities and could prevent your website from being inclusive. I strongly recommend to clients that they do not try to remove them, and I ask them consider accessible-friendly options, like styling the focus outline to more closely match the design, instead of a thick black (or white) box.

In some territories website accessibility is not just a nice to have, it’s a legal requirement. For example, here in the UK, website accessibility is a requirement for both public and private sector organisations.

[I don't pretend to be a lawyer. I'm writing this from my perspective as a web designer.]

Did this help? Please give feedback by clicking an icon below  ⬇️