[HTML/CSS] 폼 필드(input) 색상 변경하기 — accent-color

폼 필드(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

 

예시

---

HTML ▼

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

 

CSS ▼

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

 

코드펜

---

See the Pen CSS accent-color 실습 by ColorFilter (@colorfilter) on CodePen.

 

 

레퍼런스

---

• CSS accent-color | DWB
• accent-color - CSS: Cascading Style Sheets | MDN  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요