[Resolved] Checkbox checked background-color doesn’t work

[Author]

Posts

[kristenM]

Hi Support.

I'm working on styling checkboxes in views on this page: hidden link
using this guide from Toolset: https://toolset.com/forums/topic/checkbox-css-checked-label-not-working/

Unfortunately it doesn't work and changes the background-color from blue to orange

I've used this CSS in custom css:

div input[type=checkbox] {
height: 25px;
width: 25px;
background-color: #eee;
margin-right:15px;
}

div input[type=checkbox]:checked + label:after {
background-color: #ef495d!important;
}

Is there anything I have misunderstood?

Kind regards

Kristen

[Luo Yang]

Hello,

Since it is a custom codes problem, please provide a test site with the same problem, also point out the problem page URLs, I need to test and debug it in a live website, thanks

[Luo Yang]

I have done below modifications in your website:
Edit page "Nordic Startups Database":
hidden link
Find and select view block "Nordic Startups", in section "Custom JS and CSS", add below CSS codes:

div.checkbox label {
  background-color: green;
}

See my screenshot view-css.JPG

It works fine in front-end:
hidden link

It is only a demo for your reference, you need to customize the CSS codes according to what you want.

[kristenM]

Hi Luo Chang.

Thank you for your input. I now found a new way to get css in to Toolset 🙂

Unfortunately it is not background-color of the text I would change. It is the background-color for the checkbox I would like to change.

I have tried to tweak the code but can't get the checkbox it self to change color. See attached image.

I have also used several databases to try and find a solution but without luck.

Do you have any idea how to do that?

Thank you in advance.

Kristen

[Luo Yang]

You can try other custom CSS codes, for example:
https://stackoverflow.com/questions/24322599/why-cannot-change-checkbox-color-whatever-i-do/#answer-63513086

For your reference.

[kristenM]

Thank you Luo Yang.

Unfortunately it doesn't solve the problem. I wonder if the problem is AJAX-update of the view?

Kind regards Kristen

[Luo Yang]

I have tried the same CSS codes in your website:

input[type='checkbox']{
  width: 14px !important;
  height: 14px !important;
  margin: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  outline: 1px solid gray;
  box-shadow: none;
  font-size: 0.8em;
  text-align: center;
  line-height: 1em;
  background: red;
}

input[type='checkbox']:checked:after {
  content: '✔';
  color: white;
}

I can see it does work, see my screenshot checkboxes3.JPG

And it is only a demo for your reference, you need to customize the CSS codes manually.

[kristenM]

My issue is resolved now. Thank you!