[css] CSS - accent-color 속성 - 사용자 제어 선택요소의 색상/색깔 지정 (= accent-color속성 = 액센트컬러속성) ※ (인풋체크박스/인풋라디오/인풋레인지/프라그레스) 색깔 넣기

1. accent-color 예제 - 사용자 제어 선택사항 색깔 지정
2. accent-color 정의
3. accent-color 구문

accent-color 예제 - 사용자 제어 선택사항 색깔 지정

 

<style>

input[type=checkbox] {

  accent-color: red;

}

input[type=radio] {

  accent-color: blue;

}

input[type=range] {

  accent-color: green;

}

progress {

  accent-color: magenta;

}

</style>

<h3>INPUT 체크박스</h3>

<input type="checkbox" id="html" name="html" value="html">

<label for="html"> HTML</label><br>

<input type="checkbox" id="css" name="css" value="css" checked>

<label for="css"> CSS</label><br><br>

<h3>INPUT 라디오</h3>

<input type="radio" id="html" name="fav_language" value="HTML">

<label for="html">HTML</label><br>

<input type="radio" id="css" name="fav_language" value="CSS" checked>

<label for="css">CSS</label><br><br>

<h3>INPUT 레인지</h3>

<label for="vol">볼륨:</label>

<input type="range" id="vol" name="vol" min="0" max="50">><br><br>

<h3>PROGRESS</h3>

<label for="file">진행률:</label>

<progress id="file" value="72" max="100"> 72% </progress>

결과보기

accent-color 정의

 

다음 사용자 제어 가능 요소의 사용자 선택값 색깔 지정.

• <input type="checkbox">
• <input type="radio">
• <input type="range">
• <progress>

 

---

 

1.

• 기본값: auto
• 상속여부: O
• 애니가능: X
• CSS버전: CSS4
• JS구문: object.style.accentColor="red";

 

2.

IE 제외한 주요 최신 브라우저 모두 지원.

 

3. MDN accent-color 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color

 

accent-color 구문

 

selector {accent-color: auto|color|initial|inherit;}

 

---

[속성값]

 

auto

브라우저 자동 지정. (기본값)

 

color

사용자 지정 색깔. (예) 빨강 경우, red / #FF0000 / rgb(255,0,0) /  hsl(0,100%,50%) 등 다양한 방식으로 지정 가능. 색상코드 상호변환기

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.