react checkbox 사용시 사이트에 맞게 내부 css 를 변경해야 할 때가 있다.
기본 제공 style을 공식 사이트에서 가져왔더니 내부 아이콘 이미지가 svg였다.
컬러를 변경하려고 보니 컬러 코드가 신기하게 되어 있어서 찾기 어려웠는데
fill= %23ffffff 이런 식으로 코드가 작성되어 있으니 뒤에 부분만 바꾸면 된다
%23은 크롬에서 #과 같다.
'&:before': {
display: 'block',
width: 11,
height: 11,
backgroundImage:
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23ffffff'/%3E%3C/svg%3E\")",
content: '""',
},
'Front-end > HTML CSS' 카테고리의 다른 글
css만으로 marquee 애니메이션 구현 (2) | 2020.01.21 |
---|---|
css로 svg 아이콘 컬러 변경 (0) | 2020.01.21 |
내가 쓰는 sass mixins (계속 업데이트) (0) | 2020.01.21 |