radio 버튼 커스텀 색상 바꾸기
CSS 24.07.01input radio 커스텀이란 기본 HTML 라디오 버튼을 사용자 정의하여 더 매력적이고 독특한 스타일로 변경하는 것을 말합니다. 기본 라디오 버튼은 디자인적으로 제한적이기 때문에 웹사이트의 디자인을 일관되게 유지하고 사용자 경험을 향상시키기 위해 커스텀 스타일을 적용하는 경우가 많습니다.
일관된 디자인
웹사이트의 전체적인 디자인과 일치하도록 라디오 버튼을 커스터마이징할 수 있어, 일관되고 매력적인 사용자 경험을 제공합니다.
향상된 접근성
커스텀 스타일을 적용하여 더 큰 클릭 영역이나 시각적 강조를 추가함으로써 사용자가 라디오 버튼을 더 쉽게 선택할 수 있게 합니다.
브랜드 아이덴티티 강화
브랜드 색상, 로고 및 스타일을 반영한 커스텀 라디오 버튼을 사용하여 브랜드 아이덴티티를 강화하고, 사용자에게 더 기억에 남는 인상을 줄 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // 기본스타일 제거, 버튼 모양 재설정 input[type='radio'] { -webkit-appearance: none; // 웹킷 브라우저에서 기본 스타일 제거 -moz-appearance: none; // 모질라 브라우저에서 기본 스타일 제거 appearance: none; // 기본 브라우저에서 기본 스타일 제거 width: 13px; height: 13px; border: 1px solid #ccc; // 체크되지 않았을 때의 테두리 색상 border-radius: 50%; outline: none; // focus 시에 나타나는 기본 스타일 제거 cursor: pointer; } // 체크 시 버튼 모양 스타일 input[type='radio']:checked { background-color: #111; // 체크 시 내부 원 색상 border: 3px solid #fff; // 라인이 아닌, 라인과 원 사이 색상 box-shadow: 0 0 0 1px #111; // 라인 } | cs |
See the Pen Untitled by designkits (@designkits) on CodePen.