여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. CSS - accent-color
CSS – accent-color
3주전 작성
1개월전 수정

체크 박스가 선택되거나 라디오 버튼이 선택될 때 선택된 색상을 변경하고 싶다.

그럴 땐 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로 표현한다.
참고
Mingg`s Diary
밍구
공부 목적 블로그