Change Color Of Checkboxes - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Change Color Of Checkboxes

Robert

Robert

Template 3 years ago

Hello there,

I am using the Indigo template for a webshop and i want to style the checkboxes a little (see screenshot) https://prnt.sc/26ck4ag

Could you give me the right "class" which i can use in my custom css?

You can check the checkboxes online here: http://lief-zijn.vulperia.synology.me/index.php/shop/longdrinkglas-geetst

I also noticed that when i look at the options at responsive view (only checked on mobile) that the options look really bad... So if someone could help me with this i will be very happy :)

Here is a link from a product that has the options from the quickstart pack: http://lief-zijn.vulperia.synology.me/index.php/shop/spiralfoto-met-spotify-code I can see that the boxes are rounded here so there must be a way but i just can't find the right code... I want to change the color when checked (and hovered if checked) and i want to make the square checkboxes round like the ones from quickstart but with another color... And as said above i want it to look good on mobile as well :)

In case you want admin acces i have put credentials in the hidden content...

Regards, Robert

0
5 Answers
Order by
Oldest Newest Votes
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #51763

Hi there!

Thanks for your query.

Those are not checkboxes but radio buttons actually. Here is a screenshot: https://prnt.sc/26ckx44

You can use the following code in your custom.css file to change the color:

.j2store-single-product-view .j2store-single-product .j2store-addtocart-form .option input:checked + label {
    background-image: linear-gradient(286deg, red, blue);
    color: #fff;
}

Hope this is what you want. You can use your desired color in the above code snippet.

And the following blog may help you to get the right ID/class by inspect: https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action

Best Regards

0
Robert
Robert
Accepted Answer
3 years ago #51765

Hi there,

Thanks for the reply, this worked for the options from quickstart but not for the option checkboxes in this link: http://lief-zijn.vulperia.synology.me/index.php/shop/longdrinkglas-geetst

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #52433

Hello,

You are welcome!

Those were radio buttons I have given you the CSS for. But on this page you have checkboxes, and it seems it needs code customization to do what you want to achieve.

Customization is prohibited here. If there are small tweaks needed we generally try to help as I have given you the code in my previous reply. I would be happy if I could help you with this matter.

Best Regards

0
Robert
Robert
Accepted Answer
3 years ago #52437

I have the code of the radio buttons indeed... I asked about this at J2store support first... they told me to get support from the maker of the template... I will try to work around this but it is a shame that this can't be fixed... thnx for your reply and have a great evening...

0
Robert
Robert
Accepted Answer
3 years ago #52447

But like this as well... I tried a workaround by using different ways to set up the products... Now i try to use a text-field in a product... First it wasnt shown... I used this css to get it visisble:

.j2store-single-product-view .j2store-single-product .j2store-addtocart-form .option input {
    display: flex!important;
}

Now it looks like this https://prnt.sc/26drg51

But on mobile it's like this: https://prnt.sc/26drgm0

I tried with this code 

@media and screen  (max-width:768px){
.j2store-single-product-view .j2store-single-product .j2store-addtocart-form .option input {
  display: flex!important;
}}

to get it shown but i doesnt work... am i missing something here?

0