Setting background color of checkboxes in materialize using CSS variables

Question

I use materialize CSS and generate checkboxes dynamically. I want different checkboxes to have different colors. When I'm trying to set the color inline, it doesn't take effect:

<input type="checkbox" class="filled-in checkbox-custom" style="background-color: red;" />

What does work, is setting the following style in my .css file like so:

.checkbox-custom[type="checkbox"].filled-in:checked + span:not(.lever):after {
  background-color: red;
}

But this way, I can't set up a color dynamically per each individual checkbox, and I have many colors, so creating a class per each color is not an option.

I tried using css variables in the following manner, in my .css file:

:root {
  --checkbox-color: grey;
}

.checkbox-custom[type="checkbox"].filled-in:checked+span:not(.lever):after {
  background-color: var(--checkbox-color);
}

And creating the checkbox dynamically in JS as inner html using

container.innerHTML = '<input type="checkbox" class="filled-in checkbox-custom" style="--checkbox-color: ' + myJSColorVar + ';" />';

But the checkbox stays grey and the variable I pass is ignored.

Is there a way to set the checkbox color dynamically from inline CSS without setting a custom class per each color? I've reviewed the following questions which helped me getting started How to pass parameters to css classes, Change color of checkbox in Materialize framework but still weren't able to combine the two concepts.

Thanks!

You have a misunderstanding of how css inheritance works. Your custom property is not going to apply to any selector that contains this element, only to child elements. And a input doesn't have children so you don't see it having an effect. Set it to the wrapper element instead. — cloned
– cloned, Commented Nov 5, 2022 at 10:48
@cloned thanks, this indeed was the issue! going to post an answer for this — Roman Tz
– Roman Tz, Commented Nov 5, 2022 at 11:01

Roman Tz · Accepted Answer · 2022-11-05 11:12:31Z

1

As @cloned pointed out, setting the variable on a parent element helped. specifically, what I did is:

const myColors = ["red", "green", "blue"];

myColors.forEach(color => {
  const label = document.createElement("label");
  label.innerHTML = '<input type="checkbox" class="filled-in checkbox-custom"/><span class="checkbox-span"></span>';

  label.style.setProperty("--checkbox-color", color);

  document.body.appendChild(label);
});

.checkbox-custom[type="checkbox"].filled-in:checked+span:not(.lever):after {
    border: 2px solid grey;
    background-color: var(--checkbox-color);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

answered Nov 5, 2022 at 11:12

Roman Tz

1094 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting background color of checkboxes in materialize using CSS variables

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related