• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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 정의

 

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

 


 

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

부모요소의 속성값 상속.

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
css CSS - rotate 속성 - 요소 회전 (= rotate속성 = 로테이트속성)
css CSS - tab-size 속성 - 탭크기(=탭너비) 지정 (= tab-size속성 = 탭사이즈속성)
css CSS - user-select 속성 - 사용자가 요소의 텍스트를 선택 가능한지 여부 지정 (= user-s…
css CSS - widows 속성 - 페이지나 열의 상단에 남겨야 하는 최소 줄 수 지정 (= widows속성 =…
css CSS - 지그재그 톱날모양 물결무늬
5/5
목록
찾아주셔서 감사합니다. Since 2012