Styling Checkboxes

HTML-CSS
1

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:

HTML checkbox
HTML checkbox1026×768 140 KB

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;
}
3

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

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

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?

6

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

7

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
8

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

9

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

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.