复选框

by 苹果熊

HTML

<div class="form">
  <p>
    <input type="checkbox" id="c1">
    <label for="c1">c1</label>
  </p>
</div>

CSS

.form {
  padding: 20px;
}
.form::backdrop {
  background: rgba(0, 0, 0, .3);
}
input[type="checkbox"] ~ label::before {
    content: ' ';
    display: inline-block;
    vertical-align: text-bottom;
    width: .8em;
    height: .8em;
    margin-right: .2em;
    border-radius: .2em;
    background: white;
    border: 1px solid yellowgreen;
    text-indent: .15em;
    line-height: .65;
}
input[type="checkbox"]:checked ~ label::before {
    content: '\2714';
    color: yellowgreen;
}
input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}