How to remove x from cursor

Store Design
, , , , ,

Topic summary

A user wanted to remove a white circle with an ‘x’ that appeared near the cursor on their Dawn theme Shopify store.

Initial Solution:

  • Add CSS code to base.css or similar stylesheet targeting .quantity__button.disabled with cursor: auto !important
  • This initially only worked for the cart drawer section

Final Solution:

  • Expanded CSS selector to cover all disabled buttons site-wide: .button:disabled, .button[aria-disabled=true], .button.disabled, .customer button:disabled, .customer button[aria-disabled=true], .customer button.disabled, .quantity__button.disabled
  • Sets cursor: auto !important and opacity: .5 for all disabled button states

Status: Resolved - the expanded CSS code successfully removed the cursor indicator across the entire website.

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

I’m looking to remove the white circle with a x below to the cursor on dawn theme

url knmb1c-pf.myshopify.com

password samurai

IMG_7998.jpeg
IMG_7998.jpeg1851×1381 322 KB

2

Hi @undercoverfresh ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.quantity__button.disabled {
    cursor: auto !important;
    opacity: .5;
}
3

It worked but only for the cart drawer section could you remove the white circle everywhere on the website?

4

Try this code @undercoverfresh

.button:disabled, .button[aria-disabled=true], .button.disabled, .customer button:disabled, .customer button[aria-disabled=true], .customer button.disabled, .quantity__button.disabled {
    cursor: auto !important;
    opacity: .5;
}
1 Like
5

This worked thank you