@taqh
Posted
Hello ken š.
I'm assuming you're talking about the gradient background on the chekbox.
I went through your CSS and couldn't find where you tried to use it but you can try this
.check-box:checked {
background: url('../images/icon-check.svg'),
linear-gradient(to bottom right, hsl(192, 100%, 67%), hsl(280, 87%, 65%));
background-repeat: no-repeat;
background-position: center;
outline: 0;
transition: background 0ms;
}
I also noticed you're trying to set a gradient border to the checkbox on hover
.check-box:hover {
border-color: var(--check-bg);
cursor: pointer;
}
This wont work as you cant set gradients to borders. To do that you can use the border-image property however it does not work very well with a border radius. So the easiest way to achieve something close would be to do this:
.check-box:hover {
border-top: solid .1rem hsl(192, 100%, 70%);
border-left: solid .1rem hsl(192, 100%, 70%);
border-right: solid .1rem hsl(280, 87%, 80%);
border-bottom: solid .1rem hsl(280, 87%, 80%);
outline: 0;
}
You can click here for more alternatives on setting gradient borders in css
Hope you find this helpful š