Change color elements of quantity selector on product pages

Example:

Code:

/* -- code start -- */

// background color and text color
.js-qty input[type="text"] { background-color: #333333; color:#ffffff;}

// color for the  + and - options
.js-qty button { color: #ffffff;}

// border around the quantity selector box
.js-qty input {border-color: #333333;}

// hover color for the + and - options
.js-qty__adjust:hover {color: #cc0000;}

/* - end - */

For a bolder version of the text and selectors:

Use this version instead:

/* -- code start quantity -- */
.js-qty input[type="text"] { background-color: #333333; color:#ffffff; font-weight: bold;}
.js-qty button { color: #ffffff; font-weight: bold;}
.js-qty input {border-color: #333333;}
.js-qty__adjust:hover {color: #cc0000;}
/* - end - */

hex color code references:

http://www.colorhexa.com/web-safe-colors

https://picular.co/


Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Still need help? Contact Us Contact Us