[CSS] accent-color 속성으로 폼 요소 스타일링하기

 

웹사이트에서 체크박스, 라디오 버튼, 프로그레스 바 등 기본 UI 요소의 색상을 변경하는 것은 종종 까다롭습니다.
CSS의 accent-color 속성을 사용하면 한 줄의 코드로 손쉽게 주요 UI 요소의 색상을 변경할 수 있습니다.

---

accent-color를 사용할 수 있는 HTML 요소

HTML 요소

<input type="checkbox">

<input type="radio">

<input type="range">

<progress>

---

체크박스 & 라디오 버튼 색상 변경

<h3>체크박스</h3>
<input type="checkbox" checked>

<h3>라디오 버튼</h3>
<input type="radio" name="option" checked>

input {
  accent-color: #3498db; /* 파란색 */
}

 

체크박스와 라디오 버튼의 기본 강조 색상이 파란색(#3498db) 으로 변경됩니다.

 

슬라이더 & 프로그레스 바 스타일 변경

<h3>범위 슬라이더</h3>
<input type="range" min="0" max="100" value="50">

<h3>프로그레스 바</h3>
<progress value="50" max="100"></progress>

input[type="range"], progress {
  accent-color: #e74c3c; /* 빨간색 */
}

 

range와 progress 빨간색(#e74c3c) 으로 변경.

범위 슬라이더(range)와 프로그레스 바(progress)의 색상도 쉽게 변경할 수 있습니다.

 

accent-color 다크 모드에서 활용하기

/* 기본 라이트 모드 */
input {
  accent-color: #3498db; /* 파란색 */
}

/* 다크 모드 */
@media (prefers-color-scheme: dark) {
  input {
    accent-color: #f1c40f; /* 노란색 */
  }
}

 

사용자의 운영체제 설정에 따라 

라이트 모드에서는 폼 요소의 색상이 파란색(#3498db)

다크 모드에서는 노란색(#f1c40f) 으로 변경됨!

 

---

+ 구형 버전의 삼성 인터넷 브라우저나 업데이트되지 않은 기기에서 대체 스타일링 방법

/* accent-color를 지원하지 않는 브라우저를 위한 기본 스타일 */
input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid #000;
}

input[type="checkbox"]:checked {
  background-color: #3498db; /* 원하는 강조 색상 */
}

/* accent-color를 지원하는 브라우저를 위한 스타일 */
@supports (accent-color: auto) {
  input[type="checkbox"] {
    appearance: auto;
    accent-color: #3498db;
  }
}

 

@supports 규칙을 사용하여 브라우저가 accent-color 속성을 지원하는지 확인하고,

지원하는 경우에는 해당 속성을 사용하여 스타일을 적용합니다.