Softonic

CSS 체크박스 생성기

단계 1 / 2
결과

기본 체크박스는 운영체제마다 모양이 다르고 다시 스타일링하기 어렵습니다. 이 생성기는 네이티브 체크박스에 원하는 모양을 주는 순수 CSS를 만듭니다. 체크 상태의 색, 테두리 색, 크기, 모서리 반경을 고르세요. 스타일이 실제 input에 적용되므로 키보드 조작, 화면 읽기 프로그램, 폼 제출은 그대로 작동합니다. 생성된 CSS를 복사해 스타일시트에 추가하세요.

체크박스 스타일링 방법

  1. 1

    색상 고르기

    체크 상태의 배경색과 상자의 테두리 색을 정합니다.

  2. 2

    크기 설정

    12에서 48px 사이에서 크기를 고릅니다.

  3. 3

    모양 설정

    상자의 모서리 반경을 고릅니다. 최대 20px입니다.

  4. 4

    CSS 복사

    체크 표시를 미리 보고 생성된 규칙을 스타일시트에 복사합니다.

생성된 CSS의 역할

규칙은 appearance: none과 함께 input에 직접 적용됩니다. 이렇게 하면 기본 모양이 제거되어 상자를 자유롭게 스타일링할 수 있습니다:

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

체크박스가 선택되면 상자가 고른 색으로 채워지고 CSS로 그린 흰색 체크 표시가 나타납니다:

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

네이티브 input을 쓰는 이유

이 스타일은 요소를 div로 바꾸지 않습니다. 실제 <input type="checkbox">는 키보드 조작, 화면 읽기 프로그램 지원, 폼 제출을 그대로 유지합니다. appearance: none이 바꾸는 것은 모양뿐입니다. 오래된 Safari를 지원해야 한다면 규칙에 -webkit-appearance: none을 추가하세요.

포커스와 호버

생성된 규칙에는 부드러운 색 전환이 포함되지만 호버나 포커스 스타일은 없습니다. 키보드 사용자가 항상 포커스 위치를 볼 수 있도록 :hover와 :focus-visible용 규칙을 직접 추가하세요. 예를 들어 상자 주위에 색이 있는 윤곽선을 두는 방법이 있습니다.

체크 표시

체크 표시는 45도 회전시킨 작은 흰색 선입니다. 다른 색이나 더 가늘거나 굵은 선이 필요하면 ::after 규칙의 border와 border-width 값을 수정하세요.

자주 묻는 질문

아니요. CSS만 출력합니다. 폼 안의 실제 input에 클래스를 적용하세요. 보이는 라벨이 있어도 되고 없어도 됩니다.

네. 규칙은 네이티브 input에 appearance: none을 쓰므로 값이 정상적으로 전송되고 키보드와 화면 읽기 프로그램 지원도 유지됩니다.

크기는 생성기에서 12에서 48px 사이로 설정합니다. 체크 표시의 색과 굵기는 생성된 CSS의 ::after 규칙에서 수정합니다.

터치 대상은 최소 24px, 가능하면 다른 컨트롤처럼 44px을 목표로 하세요. 디자인에서 상자를 라벨 텍스트와 정렬하세요.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

랜덤 영어 글자 생성기

A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.

랜덤 색상 팔레트 생성기

2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.

이 도구는 다른 언어로도 제공됩니다