CSS var 的任何解决方法？

Question

这是已解决问题的跟进：

我们的想法是为鼠标悬停时出现的背景颜色添加过渡，以下代码适用于 IE11，但没有过渡：

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>

但是，此代码不适用于 IE11，因为它不支持 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>

我已经更新了我之前问题的解决方案中的代码，因此它可以与 IE11 一起使用，但我无法弄清楚如何在 IE11 中为 var 做一个解决方法。

编辑

感谢@Temani Afif 的回答，我设法在没有 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/ 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>

但在 IE11 中背景只是立即出现而没有过渡。

Answer 1

无CSS变量解

.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>

CSS var 的任何解决方法？

Any workaround for the CSS var?

css

internet-explorer-11

编辑