html 체크박스 색을 수정하는 것은 가능할까?

안녕하세요.

이번에 회사에서 웹 화면을 만들면서, UI/UX 디자인에 체크바스 색이 다른 것을 사용하고 있었습니다.

단순 html에서 <input type="checkbox">를 사용하게 되면, 아래 그림처럼 체크를 하게되면, 파란색으로 체크가 됩니다.

 

그럼, UI/UX 디자인 요구사항대로, 이 파란색을 회색이나 빨간색으로 HTML과 CSS 만으로 수정할 수 있을까요?

정답은 .. 안됩니다. 

css의 background-color나 color를 적용해도 색상은 변경되지 않습니다.

 

 

그럼,

어떻게 바꿀 수 있을까요? 두 가지 방법을 소개드리는데, 저는 두 번째 방법을 사용했습니다.

 

첫 번째 방법은 vuetify의 <v-checkbox>를 사용해서 체크박스의 색을 변경하는 겁니다.

 

두 번째 방법은 vue를 사용하지 않고 javascript로 이를 처리하려면, 버튼을 이용해서 background-image에 이미지를 사용해서 처리할 수 있습니다.

이미지는 두 개가 필요합니다. checked가 된 체크박스 이미지와 checked가 되지 않은 checkbox 이미지입니다.

 

...