Any workaround for the CSS var? - css

Question

This is a followup for a solved question :
transition background of pseudo element
The idea is to add a transition to the background color which appears when we do a hover, this following code works on IE11, but without the transition:
input[type=checkbox] {
appearance: none;
}
input[type=checkbox] + label {
margin: 0;
padding: 0;
user-select: none;
}
input[type=checkbox] + label::before {
content: url("https://svgshare.com/i/Qo7.svg");
cursor: pointer;
color: transparent;
background: none;
border: none;
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
}
input[type=checkbox]:checked + label:before {
content: url("https://svgshare.com/i/Qmp.svg");
background: none;
border: none;
}
input[type=checkbox]:hover + label:before {
background: #D9DEEA;
}
<input type="checkbox" id="checkbox1"/>
<label for="checkbox1"></label>
However, this code doesn't work on IE11, since it doesn't support var:
input[type=checkbox] {
appearance: none;
}
input[type=checkbox] + label {
margin: 0;
padding: 0;
user-select: none;
}
input[type=checkbox] + label::before {
content: url("https://svgshare.com/i/Qo7.svg");
cursor: pointer;
color: transparent;
background: none;
border: none;
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(farthest-side,#D9DEEA 99%,transparent) center/ var(--s,0px 0px);
background-repeat:no-repeat;
transition:0.5s;
}
input[type=checkbox]:checked + label:before {
content: url("https://svgshare.com/i/Qmp.svg");
background: none;
border: none;
}
input[type=checkbox]:hover + label:before {
--s:100% 100%;
}
<input type="checkbox" id="checkbox1"/>
<label for="checkbox1"></label>
I have updated the code from the solution of my previous question, so it can work with IE11, but I couldn't figure out how to do a workaround for var in IE11.
Edit
Thanks to #Temani Afif answer, I managed to do the transition without the var and using checkbox with input (since pseudo element are not meant to be used on replaced elements such as form elements (inputs)):
input[type=checkbox] {
appearance: none;
}
input[type=checkbox] + label {
margin: 0;
padding: 0;
user-select: none;
}
input[type=checkbox] + label::before {
content: url("https://svgshare.com/i/Qo7.svg");
cursor: pointer;
color: transparent;
background: none;
border: none;
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(farthest-side,#D9DEEA 99%,transparent) center/ 0px 0px;
background-repeat:no-repeat;
transition:0.5s;
}
input[type=checkbox]:checked + label:before {
content: url("https://svgshare.com/i/Qmp.svg");
border: none;
}
input[type=checkbox]:hover + label:before {
background-size: 40px 40px;
}
<input type="checkbox" id="checkbox1"/>
<label for="checkbox1"></label>
But in IE11 the background just appears instantly without the transition.

Answer 1

No CSS variables solution
.container {
position: relative;
height: 100px;
width: 300px;
padding: 24px;
box-sizing: border-box;
color: black;
border: 2px solid black;
}
input[type="checkbox"] {
height: 40px;
width: 40px;
position: absolute;
top: 12px;
right: 12px;
appearance: none;
outline: none;
cursor: pointer;
border: none;
background:
url("https://svgshare.com/i/Qo7.svg") calc(50% + 1px) 50% /60% 60%,
radial-gradient(farthest-side,#D9DEEA 99%,transparent) center/ 0px 0px;
background-repeat:no-repeat;
transition:0.5s;
}
input[type="checkbox"]:hover {
background-size:
60% 60%,
100% 100%;
}
input[type="checkbox"]:checked {
background-image:
url("https://svgshare.com/i/Qmp.svg"),
radial-gradient(farthest-side,#D9DEEA 99%,transparent);
}
<div class="container">
<input type="checkbox" >
</div>