radio 버튼 활성화 색상 바꾸기

업무 요청 중 라디오 버튼의 색상을 변경해 달라는 요청이 있었습니다.

---

결론

거두절미 하고 결론부터. 두 가지 방안이 있습니다.

1. accent-color css 값을 변경한다 (비추 👎)
2. 커스텀으로 css 를 새로 만든다 (추천 👍)

---

accent-color

accent-color 라는 스타일 속성을 사용하는 방법입니다.

input[type='radio'] {
	accent-color : red
}

accent-color 은 radio 버튼의 색을 바꾸기 위한 css 요소가 아닙니다.
시스템의 강조 색을 변경하는 기능이기 때문에 우리가 원하는 결과물이 나오지 않을 수 있습니다.

---

커스텀

직접 radio 버튼의 스타일을 지정하여 만드는 방법입니다.
아래 css 스타일을 통해 만들 수 있습니다.

input[type='radio'] {
  flex-shrink:0;
  -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: #0CEFD3; /*체크 시 내부 원 색상*/
  border: 3px solid #fff; /*라인이 아닌, 라인과 원 사이 색상*/
  box-shadow: 0 0 0 1px #0CEFD3; /*라인*/
}

위 코드의 장점은 라디오 버튼의 외곽선, 내부 원, 빈 공간의 색을 각각 커스텀 할 수 있다는 점입니다.