How to change CSS checkbox label to enable 'required' feature
I have checked the CSS box. Its based on a CodePen script, I zoomed out, but I can't find how to change it for the "required" checkbox. The best I can do is change the color of the hover shadow, but this is as close as possible.
Here's 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>
+3
source to share
1 answer
Use [required]
to check a checkbox with an attribute required
, then create your styles based on whether checked or not.
I edited the source code to show this while working in the demo below. I have added CSS comments to show where I made the change.
As you can see, the second checkbox is marked as "required". Therefore, the initial styles [required]
(shadow of the red boxes) are applied . After checking it, the styles are applied [required]:checked
.
.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>
+1
source to share