Color background on quantity selector (Dawn)

[ManuBC]

Hi everyone, 

I just wish to change the color of the background of the quantity selector on Dawn theme, and remove the border.

Could you help me on that ? (here picture of what I'm aiming)

Many thanks !

from that : 

To this button : 

[Made4uo-Ribe]

Hi @ManuBC 

Would you mind to share your Store URL website? with password if its protected. Thanks!

[ManuBC]

sure, here is a page exemple of a product : 

https://www.barreclandestine.com/products/morropon-lait-caramelise

[Made4uo-Ribe · Accepted solution]

Thank you for the information. Try this. Im not sure which color youll like to use. But I just copy the color in your add to cart. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

quantity-input.quantity {
    background: #041E42;
}
quantity-input.quantity * {
    color: white;
}

Result:

I hope it help. 

[ManuBC]

Many thanks for your help ! It's almost perfect, but if we have a look, there is still the black border and the color is filling in a squared shape whereas my button is rounded (I change the color in red, to see the difference). Do you see how to fix it ?

 

[Made4uo-Ribe]

Oh sorry, i forgot. Can you add this one. 

.quantity {
    --inputs-border-width: 0px;
}

Thanks!

[Jan14kl]

Thanks for the great support here!

Adding as you mentioned  the following code:

quantity-input.quantity {
    background: #1FD2FF;
}
quantity-input.quantity * {
    color: black;
}
.quantity {
    --inputs-border-width: 2px;
}

the add to cart icon looks like that in my shop:

https://plackbird.com/products/glitzertasse-gluck-ist-so-eine-mama-zu-haben

What I want to have is these Icon without the border lines and round edges. 
Like shown here:

Any idea on that one? Would be appriciated.
Thanks

[ManuBC]

Great, many thanks !

[MTAUSTRALIA]

Just to let you guys know. Anyone implementing this code should also check how it affects the Quantity selector in the Add to Cart Page. For me the quantity selector was in all to cart page went completely white but no visible selectors. 

[Made4uo-Ribe]

Thank you for bringing this to my attention. It's important to note that different stores may encounter different issues. The solution provided is tailored to the specific problem described by the store owner who sought assistance. Therefore, it may be effective for their store setup.

While the solution may work well for the store owner who requested it, I understand that it may not be universally applicable. Each store has its unique configurations and challenges.

If you encounter issues or need assistance with your store, please feel free to post a new topic detailing your specific problem. This will enable the community to better understand your situation and provide targeted solutions.

We are here to help and offer solutions based on individual store needs. Thank you for your understanding!

[brettH]

Is there a reason this wouldn't work on mobile? Works fine on my desktop but not mobile for me.