I'm trying to style a checkbox and have achieved a method of changing the background color - see below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body,
html {
font-family: "Lato", monospace;
font-size: calc(1rem + 1vw);
}
.label__checkbox {
display: none;
}
.label__checkbox i.icon {
visibility: hidden;
font-size: calc(9rem + 1vw);
color: transparent;
}
.label__check {
display: inline-block;
border-radius: 3%;
border: 2px solid rgba(0, 0, 0, 0.1);
background: white;
vertical-align: middle;
margin-right: 20px;
width: 10em;
height: 2em;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.label__check i.icon {
opacity: 0.2;
font-size: calc(9rem + 1vw);
color: white;
}
.label__check:hover {
border: 5px solid rgba(0, 0, 0, 0.2);
}
.label__checkbox:checked + .label__text .label__check {
-webkit-animation: check 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
animation: check 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
}
.label__checkbox:checked + .label__text .label__check .icon {
opacity: 1;
transform: scale(0);
color: white;
-webkit-text-stroke: 0;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@-webkit-keyframes check {
100% {
width: 10em;
height: 2em;
background: #00d478;
border: 0;
opacity: 1;
}
}
@keyframes check {
100% {
width: 10em;
height: 2em;
background: #00d478;
border: 0;
opacity: 1;
}
}
.normal {
font-size: 15px;
line-height: 20px;
color: blueviolet;
}
.bigger {
font-size: 25px;
color: forestgreen;
}
</style>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="center"> <label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span> </label>
</body>
</html>My issue is that the checkmark icon shows when the box is unchecked. This causes some confusion for some (apparently). I've been trying to use toggleclass with jquery to replace the image with something else, but I can't get that working. I've also just tried to make the initial checkmark not visible, but for some reason my attempts to make the visibility hidden are not working. Any thoughts or ideas?
Thanks for the time.
Aucun commentaire:
Enregistrer un commentaire