체크 박스가 선택되거나 라디오 버튼이 선택될 때 선택된 색상을 변경하고 싶다.
그럴 땐 accent-color 속성을 이용하면된다.
accent-color
accent-color 속성은 <input type="checkbox">, <input type="radio">, <input type="range">, <progress>에서 사용할 수 있다.
기본 예시
사용된 코드 설명
<input type=”checkbox” checked style=”accent-color: auto;” />
:
checkbox만들고 check 박스가 기본적으로 선택되어있게 한다. 선택 되어있는경우 색상을 auto표현한다.
<input type=”radio” style=”accent-color: red;”>
:
radio 버튼 만들고 선택된 radio 버튼의 경우 색상을 red로 표현한다.
<input type=”range” style=”accent-color: yellow;”>
:
range바를 만들고 왼쪽을 기준으로 설정된 range에는 색상을 yellow로 표현한다.
<progress id=”file” max=”100″ value=”70″ style=”accent-color: antiquewhite;”></progress>
:
progress바를 만들고 진행율을 70%로 설정, 진행률바 색상을 antiquewhite로 표현한다.
참고
MDN Web Docs - accent-color
공부 목적 블로그