성장가능성 200% 프론트엔드의 Dev 다이어리

퍼블리싱을 하다보면 폼 요소에 각각 컬러를 지정하는게 너무 귀찮았는데, accent-color를 사용하면 폼 요소의 디자인 UI의 컬러를 한꺼번에 지정할 수 있어서 편리하다. 그치만 모든 폼 양식에 적용되는 것은 아니고 폼 양식 중, 에 적용할 수 있다. 체크1 체크2 체크3 라디오1 라디오2 레인지 진행률 @charset "utf-8"; :root { --form-color: pink; } input[type='checkbox'], input[type='radio'], input[type='range'], progress { accent-color: var(--form-color); }이처럼 메인 컬러로 pink를 사용하기로 하여, :root에 핑크 컬러를 변수로 선언해 두었다. 혹여나 프로젝트 중 메..

input[type="number"]을 사용하면 아래 이미지처럼 마우스 오버 시 오른편에 증감 화살표 버튼이 저절로 생긴다. 요즘에는 이런 기본 버튼을 사용하는걸 사실 본 적이 없다. 필요하다면 본인들의 디자인 컨셉에 맞추어서 버튼까지 커스텀하는 게 대부분인 것 같다. 각설하고, 바로 없애보자. /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance:none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance:textfield; } 위의 css를 적용하면 아래 이미지처럼 화살표가 ..