[CSS] checkbox, radio, range 색상 바꾸기

 

기존의 CSS로 체크박스, 라디오 등의 색상을 바꾸기 위해서는 appearance 속성을 사용하여  네이티브로 지원되는 모양들을 해제한 후 색상을 입혀야 했습니다. 

 

기존에는 appearance 속성으로 인해서 체크박스, 라디오 같은 상호작용 요소도 사라져 버려, 번거로운 추가 작업이 필요했습니다.

이번에 accent-color 속성이 CSS에 추가됨으로 input의 체크박스(checkbox), 라디오(radio), 레인지(range),

프로그레스(progress) 타입에 손쉬운 색상 변경이 가능해졌습니다.

 

코드

input, progress {
  accent-color: red;
}

appearance 같은 속성을 사용하지 않고, 단순히 accent-color 속성을 사용하여 색을 지정해 주면 됩니다.

 

그럴 시 기존의 파란 색상에서 벗어난 UI 스타일을 만들 수 있게 됩니다. (체크박스, 라디오, 레인지, 프로그레스 태그만 색상이 지정됩니다.)

 

예시 코드

 

참고자료

https://gurtn.tistory.com/106

[CSS] checkbox 둥글게 만들기