<!-- 定义 checkbox -->
<svg class="defs-only" width="0" height="0" aria-hidden="true" focusable="false">
  <symbol id="checkbox-outline" viewBox="0 0 10 10" overflow="visible">
    <path stroke="currentColor" fill="none" d="M1,1 Q5,2 9,1 Q8,5 9,9 
                          Q5,8 1,9 Q2,5 1,1Z" />
  </symbol>
  <symbol id="checkbox-checkmark" viewBox="0 0 10 10" overflow="visible">
    <path stroke="seaGreen" fill="none" stroke-width="2px" stroke-linecap="round" filter="drop-shadow(0.5px 0.5px 0.3px 
                            rgba(0,0,0,0.5))" d="M2,5 L5,8 Q6,4 9,2" />
  </symbol>
</svg>

<!-- 使用 svg checkbox -->
<input class="hidden-check" type="checkbox" id="confirmation" />
<label for="confirmation">
  <svg aria-hidden="true">
    <use xlink:href="#checkbox-outline" />
    <use class="visible-check" xlink:href="#checkbox-checkmark" />
  </svg>
  <span class="label-text">
    <strong>是的,</strong> 我同意以下条款。
  </span>
</label>

.hidden-check { 
    position: absolute; 
    clip: rect(0,0, 1px,1px); 
}
label {
    color: darkOrchid;
}
label > svg, label > .label-text {
    display: inline-block;
    vertical-align: middle;
}
label > svg {
    width: 1.5em; 
    height: 1.5em;
    margin: 0 0.5em;
    overflow: visible;
}
label > .label-text {
    font-size: 1.5em;
    max-width: calc(100% - 3em);
}
.hidden-check + label .visible-check { 
    opacity: 0; 
    transition: opacity 0.3s; 
}
.hidden-check:checked + label .visible-check {
    opacity: 1;
}
.hidden-check:focus { 
    outline: none; 
}
.hidden-check:focus + label > svg { 
    outline: dotted deepSkyBlue;
    outline-offset: 0.1em;
}