사용자 지정 CSS 확인란

반응형

저는 의사 요소, SVG 애니메이션 및 기타 기술을 사용하는 몇 가지 크리에이티브 체크박스를 만드는 작업을 하고 있습니다. 어떤 경우에는, 저는 더 많은 옵션을 허용하기 위해 자바스크립트를 조금 사용했습니다.

가장 성가신 점은 확인란이 on/off 값을 반환한다는 사실이기 때문에 여러 옵션이 있는 확인란 중 일부에 대해 1, 0 또는 중간 숫자를 반환하는 숨겨진 입력을 만들었습니다. 즉, .hidden-value 클래스와 함께 이 숨겨진 입력에서 직접 확인란 값에 액세스할 수 있습니다.

또한 데이터 값 속성 아래의 .checkbox-container 요소에 확인란 값을 추가해 많은 유연성을 제공합니다.

CSS의 사용자 지정 확인란

 

확인란과 입력 양식은 사용자로부터 정보를 수집하기 위해 사용하는 다양한 화면 중 하나입니다. 이것들을 이용한 사용자 상호작용은 종종 꽤 지루하지만, 꼭 그럴 필요는 없다. 확인란에 의존하는 목록 앱 및 프로젝트의 경우 확인란이 표시되는 방식이 매우 중요합니다. 여기 확인란은 확인란과 관련된 주요 사용 사례를 포함합니다.

적응성

웹에서 볼 수 있는 더 복잡한 확인란의 경우 .big 또는 .medium과 같은 CSS 클래스가 함께 제공되는 경우가 많습니다. 오늘날 웹사이트가 제공하는 다양한 화면과 함께, 이것은 실제로 특별히 유용하기 보다는 오히려 방해물이 될 수 있다.

그것을 피하기 위해, 나는 이 체크박스를 모두 em 유닛으로 만들었습니다. 즉, 확인란은 원하는 크기로 만들 수 있으며, 상위 요소의 글꼴 크기만 변경하면 됩니다. 이러한 확인란의 파일에서는 .list-항목의 글꼴 크기를 변경할 수 있습니다. HTML 태그에서 해봤지만, 얼마든지 변경해 주세요. 이것은 당신이 그것들을 모바일로 쉽게 조정할 수 있다는 것을 의미합니다. 간단한 예로:

@media screen and (max-width: 900px) {
      html {
                font-size: 30px; /* Very big buttons */
      }
}

 

이것은 특정 CSS 클래스에 의존해야 하는 번거로움을 없애고 모든 것을 비교적 직설적으로 만든다.

SVG

이 확인란들 중 일부에 대해 제가 한 것은 SVG 경로를 사용하여 애니메이션을 만드는 것이었습니다. 놀라운 것은 저는 자바스크립트가 필요없다는 것입니다. 그래서 다른 튜토리얼에서 다루도록 하겠습니다. 손으로 그린 SVG 효과를 만드는 방법에 대해서요. 채널을 고정해 주십시오

자바스크립트

대부분의 체크박스는 자바스크립트 없이도 잘 동작하지만, 몇 가지 기능을 추가했습니다. 예를 들어 일부 확인란에는 여러 옵션이 있습니다. 예를 들어 4가지 설정이 있을 수 있습니다. 이 경우 사용자 정의 값을 설정하려고 했습니다. 1 또는 0 대신 1/3의 값을 사용하여 0.33을 생성할 수 있습니다. 물론 순수 CSS로는 불가능하지만, 몇 개의 확인란에만 적용됩니다.

 

두 번째로 첫 번째 단락에서 설명한 것처럼 숨겨진 입력의 값을 업데이트하고 싶었습니다. 자바스크립트로 이것을 하는 것은 비교적 쉬운 일이었다.

사용성 및 접근성

모든 디자인의 핵심 부분은 사용성과 접근성이다. 특정 접근성 프로그램뿐만 아니라 키보드 전체에 커피를 쏟은 적이 있는데 탭 키만 작동한 적이 있었다.

그래서 이 체크박스를 위해 입력을 완전히 숨기는 것이 아니라 화면 밖으로 이동시키는 것으로 추가했습니다. 즉, 입력은 여전히 포커스가 있으며 포커스가 맞춰지면 옆에 있는 레이블이나 요소를 업데이트합니다. 따라서 사용자 지정 확인란에 대한 포커스 이벤트를 다음과 같이 탭으로 이동하고 제공할 수 있습니다.

input[type="checkbox"] {
      position: absolute;
      right: 999999px;
}
input[type="checkbox"]:focus + label {
      /* Our focus CSS goes here */
}

 

CSS 변수

여기서도 큰 점은 CSS 변수였습니다. 확인란과 관련된 모든 색상은 CSS 변수로 정의됩니다. 즉, CSS 변수 색상을 업데이트하고 모든 체크박스의 색상도 업데이트할 수 있습니다. 이 기능은 매우 유용합니다. 확인란 모양을 개별적으로 변경할 필요 없이 몇 가지 주요 변수를 업데이트할 수 있습니다. 여기서 자바스크립트로 CSS 변수를 업데이트하는 방법을 다루었습니다.

결론

요약하자면, 이러한 효과가 향후 프로젝트 중 하나에서 유용하게 활용되기를 바랍니다. 데모와 코드를 CodePen에 넣었고 코드는 아래 Git Repo에서 확인할 수 있습니다. 즐기세요!

• CodePen 데모
• 깃허브 레포