I have created a css checkbox. It’s based on a Codepen script I’ve whittled down, but can’t fine how to modify it for a ‘required’ checkbox. I fear this is way beyond me...the best I can do is to change the colour of the box-shadow on ‘hover’ but that’s as close as I can get. Thank you in advance. 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;
}
</style>
<body>
<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>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire