checkbox 또는 radio 버튼으로 기본 디자인을 변경하는 방법

비교적 잘하기 때문에 잊지 않기 위해 메모.

하고 싶은 일

이 기본 디자인에서

이렇게 괜찮은 느낌으로 하고 싶다. . (멋지지 않지만...)

코드

html

<ul class="list">
  <li class="list__item">
    <label>
      <input type="radio" name="radio_button" class="input">
      <span class="text">ラジオ1</span>
    </label>
  </li>
  <li class="list__item">
    <label>
      <input type="radio" name="radio_button" class="input">
      <span class="text">ラジオ2</span>
    </label>
  </li>
  <li class="list__item">
    <label>
      <input type="radio" name="radio_button" class="input">
      <span class="text">ラジオ3</span>
    </label>
  </li>
</ul>

css

.list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.input {
  display: none;
}

.text {
  position: relative;
}

.text:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border: 1px solid #ff0000;
  border-radius: 50%;
}

.input:checked + .text:after {
  position: absolute;
  top: 3px;
  left: 3px;
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff0000;
}

.input:checked + .text {
  color: #ff0000;
}

포인트

거기까지 어려운 것은 아무것도 없습니다.
먼저 input을 display:none;로 숨기고,
.text:before로 대체되는 둥근 테두리를 만들고 있습니다.

.input:checked + .text:after 부분은
인접 셀렉트군요. 별로 사용하지 않기 때문에 잊었지만,
요소와 요소가 직접 인접하고 있을 때 직후의 요소(여기서 말한다.text:after입니다.)에 적용되는 것이군요.
그러므로
checked가 붙었을 때.text의 after에는 이 css가 적용됩니다~
.text:before 안에 표시되도록 만들고 있습니다.

※ 말하지 않아도 알 수 있다고 말할지도 모릅니다만, label 태그로 둘러싸고 있으므로 그 범위에서 클릭하면 input는 checked 가 됩니다.

요약

이상으로 끝입니다.
라디오 버튼만 썼지만,
checkbox도 거의, 아니, 정확히 같은 일을 하면 할 수 있으므로 시험해 보세요.