Styling Checkboxes

guys, I’m trying to style my box with the label inside it. After checking I want the checkbox to be a lighter blue. But I’m not able to style the after, I don’t know what’s wrong.

Here is my code:

CSS:

.flex-checkbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.checkbox-container, select {
  width: 70%;
}
.checkbox-container label {
  display: flex;
  justify-content: center;
  margin: 5px -2px 5px 0;
  padding: 6px 35px;
  border-radius: 10px;
  background-color: #3fd5d5;
}
input[type="checkbox"]:checked + .checkbox-container label {
  background-color: #a2efef;
  box-shadow: 0.3px 0.3px 6px 0.5px #418181;
}

Since you are targeting siblings of the checkbox, then .checkbox-container label will do nothing. You just need to add label after the +.

Why? Because .checkbox-container label is not a sibling of input[type="checkbox"]:checked. Instead, it is a parent of it.

1 Like

There is also the accent-color property you can check out.

input[type="checkbox"] {
  accent-color: #2196f3;
}
1 Like

Thanks for answering randell!
I just put it the way you explained: input[type=“checkbox”] + label, but the css worked only in the first and last item. Do you have any ideia why this could be happening?

Can you put your project code in something like Codepen, so we can take a look?

Yeah, sure! Here is the code in codepen: https://codepen.io/danielasegadilha/pen/VwBBJzE

You have spaces in the for attribute value for the two elements, so the label and input elements are not connected. The id and for attributes values must match exactly.

1 Like

kkkk I hate it when it’s a typo that makes things not work. Thanks, now it works!

Make sure you format your code. Codepen can auto-format it for you. Use the menu on the top right of the code boxes.