html标签如下:
<input
type="checkbox"
id="agree"
class="form-checkbox"
:checked="checked"
@change="change"
/>
<label for="agree" class="form-checkbox__label">
<span>*I have read and agree to the</span>
<span><Terms of Use></span>
</label>
.form-checkbox {
display: none;
}
.form-checkbox__label {
position: relative;
padding-left: 20px;
display: inline-block;
vertical-align: top;
line-height: 20px;
cursor: pointer;
}
.form-checkbox__label::before {
top: 4px;
left: 0;
width: 10px;
height: 10px;
border: 1px solid #2bb7b3;
border-radius: 50%;
box-sizing: content-box;
}
.form-checkbox__label::before,
.form-checkbox__label::after {
content: "";
position: absolute;
}
.form-checkbox:checked + label::after {
visibility: visible;
opacity: 1;
}
.form-checkbox__label::after {
top: 7px;
left: 3px;
width: 6px;
height: 6px;
background-color: #2bb7b3;
border-radius: 50%;
visibility: hidden;
opacity: 0;
}