css チェックボックスを装饰

Posted 2021-05-13

<tr>
    <th>種別<span class="must">必須</span></th>
    <td class="checkbox checkbox01"><label><input type="checkbox" name="type" value="入居相談について" class="checkbox01-input">
            <span class="checkbox01-parts">入居相談について</span></label>
        <label><input type="checkbox" name="type" value="施設見学について" class="checkbox01-input">
            <span class="checkbox01-parts">施設見学について</span></label><br>
        <label><input type="checkbox" name="type" value="求人について" class="checkbox01-input">
            <span class="checkbox01-parts">求人について</span></label>
        <label><input type="checkbox" name="type" value="その他お問い合わせ" class="checkbox01-input">
            <span class="checkbox01-parts">その他お問い合わせ</span></label></td>
</tr>

.checkbox01-input{
  display: none;
}
.checkbox01-parts{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
.checkbox01-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #c9c9c9;
  border-radius: 50%;
}

.checkbox01-input:checked + .checkbox01-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 3px;
  width: 11px;
  height: 11px;
  background: #c9c9c9;
  border-radius: 50%;
}