HTML 라디오 버튼 스타일 지정 방법: 단계별 가이드

HTML 라디오 버튼은 웹 양식의 필수 요소이지만 기본 모양은 아쉬운 점이 많습니다. 이 블로그 게시물에서는 CSS를 사용하여 라디오 버튼의 모양을 사용자 정의하여 보다 사용자 친화적이고 시각적으로 매력적인 경험을 만드는 제가 가장 좋아하는 방법 중 하나를 살펴보겠습니다.

라디오 버튼을 숨기는 것부터 시작해 보겠습니다!

라디오 버튼에 대한 크로스 브라우저 스타일의 한계를 인정하는 것부터 시작해야 합니다. 직접 스타일을 지정할 수 없다는 점은 실망스럽지만 해결 방법을 사용할 수 있습니다. 이 예에서 첫 번째 단계는 실제 라디오 버튼 입력을 숨기는 것입니다. 이상하게 들리겠지만, 스타일을 지정할 수 없다는 것을 알고 있으므로 방정식에서 제외하면 됩니다.

그러나 이 작업은 모든 사용자가 계속 작동할 수 있도록 접근 가능한 방식으로 수행되어야 합니다. 이는 유용성을 유지하면서 콘텐츠를 시각적으로 숨기는 다음 스타일 세트를 사용하여 달성할 수 있습니다.

 input[type="radio"] { border: 0 !important; clip: rect(1px, 1px, 1px, 1px); height: 1px !important; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px !important; }

사용자 정의 라디오 버튼 만들기

라디오 버튼의 사용자 정의 모양을 만들기 위해 간단한 CSS와 함께 레이블의 ::before 의사 요소를 활용하여 원하는 모양을 만듭니다.

이 예에서 HTML은 다음과 같습니다.

 <form> <h1>Can We Style HTML Radio Buttons?</h1> <ul> <li> <input type="radio" value="yes" name="option" id="yes" /> <label for="yes">Yes</label> </li> <li> <input type="radio" value="no" name="option" id="no" /> <label for="no">No</label> </li> <li> <input type="radio" value="maybe" name="option" id="maybe" /> <label for="maybe">Maybe</label> </li> </ul> </form>

시작하려면 레이블 요소에 다음 스타일을 추가합니다.

 label { display: inline-flex; align-items: center; }

이렇게 하면 라디오 버튼 스타일을 추가하면 레이블 텍스트와 수직으로 올바르게 정렬됩니다.

이제 ::before 의사 요소를 사용하여 모의 라디오 버튼을 추가하겠습니다.

 label::before { content: ''; display: block; height: 1.25em; width: 1.25em; border: solid 1px #ccc; border-radius: 50%; margin-right: 0.5em; }

이 시점에서 라디오 버튼 목록과 비슷해지기 시작한 것이 있지만 라디오를 클릭하면 아무 일도 일어나지 않는 것을 볼 수 있습니다. 의사 요소는 시각적으로 라디오 버튼과 유사하지만 아직 확인된 상태를 처리하지 않았기 때문에 상호 작용성이 부족합니다.

상호작용 및 상태 처리

우리는 레이블에 있는 :checked 의사 클래스와 인접한 형제 선택기를 사용하여 확인된 상태를 처리할 수 있습니다.

 input[type="radio"]:checked + label { color: black; }

내부 점의 경우 의사 요소의 방사형 그래디언트를 활용할 수 있습니다.

 input[type="radio"]:checked + label::before { background: radial-gradient(0.75em circle at center, currentColor 50%, transparent 55%); box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

이제 이것을 클릭하면 기본 라디오 버튼처럼 작동합니다. 그리고 몇 가지 전환 효과를 추가하여 상호 작용을 향상할 수 있습니다.

 label::before { ... transition: border ease-in 150ms, box-shadow ease-in 150ms; }

집중을 잊지 말자

접근성을 향상하려면 모의 라디오 버튼의 포커스 상태도 해결해야 합니다. 이번에는 :focus 의사 클래스와 레이블이 있는 인접한 형제 선택기를 활용해야 합니다.

 input[type="radio"]:checked + label, input[type="radio"]:focus + label { color: black; } input[type="radio"]:focus + label::before { box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

결론

이 방법을 따르면 사용자 경험을 크게 향상시키는 세련되고 접근 가능한 사용자 정의 라디오 버튼을 만들 수 있습니다. 이러한 사용자 정의 라디오 버튼은 표준 버튼보다 보기에 좋을 뿐만 아니라 적절하게 구현되면 더 나은 피드백과 상호 작용을 제공할 수도 있습니다.

이것은 기본 브라우저 스타일과 크게 다르지 않아 보일 수도 있는 매우 간단한 예이지만 핵심은 이 설정을 사용하면 원하는 것은 무엇이든 거의 할 수 있다는 것입니다. 따라서 스타일을 자유롭게 실험하고 프로젝트 디자인에 맞게 조정해 보세요.

실제로 보고 싶으십니까?

아래 코드펜 예제에서 이 기술의 데모 코드와 예제를 확인해보세요. 질문이나 의견이 있으시면 주저하지 말고 댓글을 남겨주세요.

약간의 창의성과 약간의 CSS를 사용하면 접근성과 유용성을 유지하면서 HTML 라디오 버튼의 모양을 디자인에 맞게 변형할 수 있다는 점을 기억하세요!