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을 목표로 하세요. 디자인에서 상자를 라벨 텍스트와 정렬하세요.

관련 도구

보색 찾기

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

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

PHP 포매터

간단한 PHP 코드에 줄바꿈과 2칸 또는 4칸 들여쓰기를 추가합니다. 결과를 반드시 검토하세요. PHP 파서나 PSR-12 적용 도구가 아닙니다.

OpenAPI 검증기

OpenAPI 또는 Swagger 문서를 JSON이나 YAML로 붙여넣고 핵심 구조를 점검하세요: 버전 필드, info 객체, paths를 명확한 오류와 경고와 함께 확인합니다.

CSS 로딩 애니메이션 생성기

순수 CSS로 원형 스피너를 만듭니다. 지름, 테두리 두께, 포인트 색상, 회전 속도를 설정하고 미리 보기를 확인한 뒤 바로 쓸 수 있는 CSS를 복사하세요. SVG도 자바스크립트도 필요 없습니다.

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