Alraffe
이것 저것 개발.
Alraffe
전체 방문자
오늘
어제
  • 분류 전체보기
    • TIL
    • Front-end
      • CSS
      • React
      • Next.js
    • Back-end
    • Book
      • Effective Typescript

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 개발자 커피챗
  • 이펙티브타입스크립트
  • next14
  • 프론트엔드
  • 타입스크립트
  • 리액트
  • 깃헙 배포 빈 화면
  • TypeScript
  • git
  • 자바스크립트
  • frontend
  • 주니어 개발자 이력서
  • 타입스크립트 책 추천
  • object 값을 찍고 싶을 떄
  • JavaScript
  • JASON.parse()
  • 오랠리
  • JASON.stringify
  • Til
  • react
  • 프론트엔드회고
  • 프론트엔드 책 추천
  • vite 깃헙 배포
  • evnentBubbling
  • 노션 이력서
  • 배포 에러
  • vite 배포 에러
  • JS
  • 타입스크립트 추천
  • 타입스크립트 책

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Alraffe
Front-end/CSS

[CSS] custom checkbox 만들기

Front-end/CSS

[CSS] custom checkbox 만들기

2022. 5. 10. 23:36

checkbox를 css로 커스텀하기는 너무나 어렵다.

인터넷에서 열심히 찾아서 알아낸 방법. 잊지 않기 위해 적는다.

 <div className="checkboxWrapper">
  <input
    type="checkbox"
    name="전체"
    value="전체"
    id="all"
    className={styles.all}
  />
  <label htmlFor="all" className={styles.option}>
    <span className={styles.checkmark} />
    All
  </label>
</div>


/*CSS*/
.all {
  position: absolute;
  opacity: 0;
}

.all:checked ~ .option > .checkmark {
  border-width: 1px;
  background-color: red;
}

.all:checked ~ .option > .checkmark:after {
  display: block;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border: 1px solid red;
  border-radius: 5px;
  margin-right: 10px;
}

.option {
  padding-left: 30px;
}

.option > .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.option:hover > .checkmark {
  border: 2px solid green;
}

 

 

그런데.. Checkbox 안에 이모티콘을 쓸 수는 없을까? content에 unicode를 넣는 건 왜 안될까? 🤨

저작자표시 비영리 변경금지 (새창열림)
    Alraffe
    Alraffe

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.