CSS로 라디오버튼 스타일 만들기

CSS로 기본 HTML 라디오 버튼의 스타일을 사용자 정의할 수 있지만, 기본적으로 브라우저에서 제공하는 라디오 버튼은 제한된 스타일링만 가능합니다. 이를 해결하기 위해, 라디오 버튼을 숨기고 대신 CSS와 HTML을 사용하여 커스텀 라디오 버튼을 만들 수 있습니다.

아래는 라디오 버튼을 커스터마이징하는 방법의 예입니다. 이 예시에서는 기본 라디오 버튼을 숨기고, 라벨과 ::before 가상 요소를 사용하여 커스텀 라디오 버튼을 디자인합니다.

Option 1 Option 2 Option 3

  <input type="radio" id="option1" name="option" checked>
  <label for="option1">Option 1</label>

  <input type="radio" id="option2" name="option">
  <label for="option2">Option 2</label>

  <input type="radio" id="option3" name="option">
  <label for="option3">Option 3</label>

    /* 라디오 버튼 숨기기 */
    input[type="radio"] {
      display: none;
    }

    /* 라벨 스타일 (라디오 버튼 대신 나타나는 부분) */
    label {
      display: inline-block;
      position: relative;
      padding-left: 30px; /* 커스텀 라디오 버튼의 위치 */
      margin-right: 20px;
      cursor: pointer;
      font-size: 16px;
    }

    /* 커스텀 라디오 버튼 */
    label::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #007bff; /* 테두리 색상 */
      background-color: white;
    }

    /* 체크된 상태에서 내부 원 */
    input[type="radio"]:checked + label::after {
      content: '';
      position: absolute;
      left: 4px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #007bff; /* 선택된 상태의 원 색상 */
    }

    /* 호버 상태에서 테두리 색상 변경 */
    label:hover::before {
      border-color: #0056b3;
    }

코드 설명:

1. 라디오 버튼 숨기기:
   • input[type="radio"]의 display: none을 사용하여 기본 라디오 버튼을 숨깁니다.
2. 라벨 스타일:
   • label 요소는 사용자 정의 라디오 버튼처럼 동작합니다. 라벨의 왼쪽에 라디오 버튼이 표시되도록 padding-left를 사용하고, 가상 요소 ::before로 실제 버튼을 디자인합니다.
3. 커스텀 라디오 버튼 만들기:
   • label::before를 사용해 커스텀 라디오 버튼의 기본 스타일을 정의합니다. 원 모양의 테두리를 그리고, 배경은 흰색으로 설정했습니다.
4. 선택된 상태 표현:
   • input[type="radio"]:checked + label::after에서 체크된 라디오 버튼일 경우, 라벨 안에 작은 원이 나타나도록 설정합니다. 이 원이 라디오 버튼이 선택되었음을 나타냅니다.
5. 호버 효과:
   • label:hover::before를 사용하여 마우스가 라벨 위에 있을 때 테두리 색상이 바뀌도록 설정합니다.

이 코드는 기본적인 라디오 버튼 대신 사용자 정의된 스타일의 라디오 버튼을 제공하면서, 사용자가 선택한 항목을 시각적으로 보여줍니다.