CSS accent-color: 양식 컨트롤 색

CSS accent-color: 양식 컨트롤 색

CSS accent-color 속성은 일부 요소가 생성하는 사용자 인터페이스 컨트롤의 강조색을 지정합니다.

* {
  accent-color: red;
  /* accent-color: #43E4DA; */
  /* accent-color: #fff; */
  /* accent-color: #000; */
}
label {
  display: block;
}
label + label {
  margin-top: 1em;
}
<form>
  <label>
    <input checked type="checkbox">
    체크박스
  </label>
  <label>
    <input checked type="radio">
    라디오
  </label>
  <label>
    <input checked type="range">
    범위
  </label>
  <label>
    <progress value="0.5"></progress>
    진행도
  </label>
</form>

불러오는 중...

현재, accent-color를 지원하는 브라우저에서는 다음 요소의 강조색을 설정할 수 있습니다.

구문

/* 키워드 값 */
accent-color: auto;

/* <color> 값 */
accent-color: red;
accent-color: #5729e9;
accent-color: rgb(0, 200, 0);
accent-color: hsl(228, 4%, 24%);

/* 전역 값 */
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;

auto

사용자 에이전트가 플랫폼에 설정된 강조색과 일치하는 색을 선택합니다.

<color>

강조색으로 사용할 색을 지정합니다.

명세

CSS Basic User Interface Module Level 4

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
accent-color
auto