폼 필드(input) 스타일은 디바이스, OS, 브라우저에 따라 달라지므로 원하는 스타일을 지정하기 힘들다. 하지만 accent-color CSS 속성을 이용하면 폼 필드의 강조 색상을 손쉽게 변경할 수 있다.

accent-color 적용 예시

accent-color 속성은 input 태그의 checkbox radio range 타입에 적용할 수 있다. CSS 셀렉터에 input만 명시했다면 checkbox radio range 타입에 모두 적용된다.

input { }
input[type="radio"] { }
input[type="checkbox"] { }
input[type="range"] { }

accent-color 속성은 Chrome, Firefox 최신 버전에서 지원한다. 아쉽게도 사파리에선 지원하지 않는다.

via caniuse.com

예시

<label for="radio-pink">
  <input type="radio" id="radio-pink" name="radio" checked />
  Pink
</label>

/* id가 pink로 끝나는 input 엘리먼트 선택 */
input[id$="pink"] {
  accent-color: deeppink;
}

코드펜