How do I modify a CSS checkbox label to include a 'required' function

Question

I have created a CSS checkbox. It’s based on a CodePen script I've whittled down, but I can't find how to modify it for a "required" checkbox. The best I can do is to change the color of the box-shadow on "hover", but that's as close as I can get.

Here is what I have:

.checkbox1 {
  width: 25px;
  margin: 20px 100px;
  position: relative;
}

.checkbox1 label {
  cursor: pointer;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 3px;
  background: linear-gradient(#ffffff, #dddddd 80%);
  border: 0.5px solid #7d878d;
  border-radius: 4px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.checkbox1 label:after {
  opacity: 0.0;
  content: '';
  position: absolute;
  width: 14px;
  height: 6px;
  background: transparent;
  top: 1px;
  left: 2px;
  border: 3px solid #ff6600;
  border-top: none;
  border-right: none;
  transform: rotate(-50deg);
}

.checkbox1 label::after {
  opacity: 0.0;
}

.checkbox1 input[type=checkbox]:checked+label:after {
  opacity: 5;
}

.checkbox2 {
  width: 25px;
  margin: 20px 100px;
  position: relative;
}

.checkbox2 label {
  cursor: pointer;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 3px;
  background: linear-gradient(#ffffff, #dddddd 80%);
  border: 0.5px solid #7d878d;
  border-radius: 4px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.checkbox2 label:after {
  opacity: 0.0;
  content: '';
  position: absolute;
  width: 14px;
  height: 6px;
  background: transparent;
  top: 1px;
  left: 2px;
  border: 3px solid #ff6600;
  border-top: none;
  border-right: none;
  transform: rotate(-50deg);
}

.checkbox2 label::after {
  opacity: 0.0;
}

.checkbox2 label:hover {
  box-shadow: 0px 0px 4px 0px #ff0000;
  opacity: 5;
}

.checkbox2 input[type=checkbox]:checked+label:after {
  opacity: 5;
}

<div class="checkbox1">
  <input type="checkbox" value="1" id="input1" name="" />
  <label for="input1"></label>
</div>

<div class="checkbox2">
  <input type="checkbox" value="2" id="input2" name="" required="" />
  <label for="input2"></label>
</div>

Answer 1

Use [required] to select the checkbox that has the required attribute, then make your styles based on whether or not it is checked.

I've edited your original code to show this working in the demo below. I've added comments to the CSS to show where I've made the changes.

As you can see, the second checkbox is marked as being "required." Therefore, the [required] initial styles (red box shadow) are applied. Once it is checked, the [required]:checked styles are applied.

.checkbox1 {
  width: 25px;
  margin: 20px 100px;
  position: relative;
}

.checkbox1 label {
  cursor: pointer;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 3px;
  background: linear-gradient(#ffffff, #dddddd 80%);
  border: 0.5px solid #7d878d;
  border-radius: 4px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.checkbox1 label:after {
  opacity: 0.0;
  content: '';
  position: absolute;
  width: 14px;
  height: 6px;
  background: transparent;
  top: 1px;
  left: 2px;
  border: 3px solid #ff6600;
  border-top: none;
  border-right: none;
  transform: rotate(-50deg);
}

.checkbox1 label::after {
  opacity: 0.0;
}

.checkbox1 input[type=checkbox]:checked+label:after {
  opacity: 5;
}

.checkbox2 {
  width: 25px;
  margin: 20px 100px;
  position: relative;
}

.checkbox2 label {
  cursor: pointer;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 3px;
  background: linear-gradient(#ffffff, #dddddd 80%);
  border: 0.5px solid #7d878d;
  border-radius: 4px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.checkbox2 label:after {
  opacity: 0.0;
  content: '';
  position: absolute;
  width: 14px;
  height: 6px;
  background: transparent;
  top: 1px;
  left: 2px;
  border: 3px solid #ff6600;
  border-top: none;
  border-right: none;
  transform: rotate(-50deg);
}

.checkbox2 label::after {
  opacity: 0.0;
}

/* Here, we set the default style of an UNCHECKED REQUIRED checkbox */
.checkbox2 input[type="checkbox"][required]+label {
  box-shadow: 0px 0px 4px 0px #ff0000;
  opacity: 5;
}

/* Now, we set the style of a CHECK REQUIRED checkbox */
.checkbox2 input[type="checkbox"][required]:checked+label {
  box-shadow: 0px 0px 0px 0px transparent !important; /* Remove the box-shadow */
}

.checkbox2 input[type=checkbox]:checked+label:after {
  opacity: 5;
}

<div class="checkbox1">
  <input type="checkbox" value="1" id="input1" name="" />
  <label for="input1"></label>
</div>

<div class="checkbox2">
  <input type="checkbox" value="2" id="input2" name="" required="" />
  <label for="input2"></label>
</div>