How to remove the highlighted parts on the quantity button

Store Design
, , , , , , , , , , , , , , ,

Topic summary

A user wants to remove the highlighted box that briefly appears around quantity buttons when tapped on mobile devices. The issue occurs on a Dawn theme (version 15.3.0) Shopify store.

Visual Issue:

  • A box shadow/highlight effect flashes momentarily when quantity buttons are pressed on mobile
  • Two images demonstrate the unwanted highlighting effect

Proposed Solution:

  • Add custom CSS code to the theme’s stylesheet (base.css, theme.css, styles.css, custom.css, or theme.scss.liquid)
  • The CSS targets .quantity__button and .quantity__input elements
  • Removes box-shadow and background-color properties when elements are not in focus-visible or focused states

Status: A solution has been provided but not yet confirmed as resolved by the original poster.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

I’m looking to remove the quantity button highlighted box when you press on it on mobile

(it shows up for a split second)

url knmb1c-pf.myshopify.com

password samurai

Dawn Version 15.3.0

IMG_9512.jpg
IMG_9512.jpg1290×310 15.3 KB

IMG_9510.jpg
IMG_9510.jpg1290×358 16.9 KB

2

@undercoverfresh Hello

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file → Save

.quantity__button:not(:focus-visible):not(.focused), .quantity__input:not(:focus-visible):not(.focused) {
    box-shadow: unset;
    background-color: unset;
}

If I managed to help you then, don’t forget to Like it and Mark it as a Solution!

Best Regards,
Dws_pvt_ltd