Change the color of the checkboxes

Please tell me how I can change the colors of the checkboxes in the “Frequently bought together” block.
With respect.

Hello,

Thank you very much for choosing our theme and for contacting us.

Could you kindly provide the page URL and screen of the block you mean, please we will check the settings or give the CSS.

Best Regards

[ramkhakov]

I sent you a link to the page and a screenshot where I highlighted the checkboxes that I would like to change.
Thank you very much.

• This reply was modified 2 years, 2 months ago by ramkhakov.
• This reply was modified 2 years, 2 months ago by ramkhakov.

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .wd-toolbar {
    background-color: red;
}
body .wd-tools-element .wd-tools-icon {
color:white;
}
body .wd-toolbar.wd-toolbar-label-show .wd-toolbar-label {
    color:white;
}
body .wd-tools-element:is(.wd-design-2,.wd-design-5) .wd-tools-count,
body .wd-header-cart.wd-design-2 .wd-cart-number, 
body .wd-header-cart.wd-design-5 .wd-cart-number{
    background-color: black;
}

Best Regards

Hello,

Sorry. this code is wrong. Your product link is not workable. Please check the site.

Best Regards

Yes, I realized that you sent me the wrong code. I have sent you a new product link.

Hello,

We have checked the checkboxes, unfortunately, it is not possible to customize them. Here is the screen showing how they look by default: https://prnt.sc/RaXXsFnfY8rE

If you have any questions please feel free to contact us.

Best Regards

/*  Change the size of checkboxes */
.wd-fbt-product input[type="checkbox"] {
    width: 17px;
    height: 17px;
    color: red;
}
/* Change color of checkboxes */
input[type="checkbox"]{
  -webkit-appearance: none;
  content: '';
  width: 18px;
  height: 18px;
  background-color: white;
  border: 1px solid gray;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  margin-bottom: 3px;
}

input[type="checkbox"]:checked{
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3E%3Cg class='nc-icon-wrapper' stroke-width='1' fill='%23555555'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' data-cap='butt' d='M2.83 4.72l1.58 1.58 2.83-2.83'/%3E%3C/g%3E%3C/svg%3E");
  background-color: black;
  background-position: center;
  border: none;
  padding: 1px;
}

In “(input[type=”checkbox”]:checked)” just change the background-color to whatever color you want

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts