아이스
58
2021-09-15 10:45:02
4
122

안녕하세요. 혹시 체크박스 커스텀 하는 방법에 대해서 아시는 분 있으신가요?ㅠㅠ



구글링 하면 체크박스 커스텀 하는 방법이 나오는데요.

저렇게 동그라미가 겹쳐있는 모양을 만들려면 어떻게 해야 할까요?

저 모양 이미지 파일이 없어서 배경이미지로 넣을 수 없습니다.

체크시에 저 모양이 나와야 합니다.ㅠㅠ

0
  • 답변 4

  • doru
    328
    2021-09-15 10:58:16 작성 2021-09-15 10:59:43 수정됨

    엄... 그냥 체크된거랑 체크안된거 따로 이미지 만들고 백그라운드로 넣어줘야합니다.

    cheked 되면 체크된 이미지로 나오게.. css를 짜야죠..

    사실 방법이야 여러가지긴한데.. 

  • 개봉박살
    397
    2021-09-15 11:02:30

    체크박스 자체 디자인을 변경하는방법은 제가 아는 한 없습니다.

    그래서 다른요소들로 디자인하고 체크박스를 컨트롤하는 자바스크립트를 짭니다.

    그리고 대상 체크박스는 숨기죠....


    부트스트랩이나 시멘틱-UI, 머테리얼-UI 전부 제가 말씀드린 방식으로 구현했더라구요

  • baebae
    375
    2021-09-15 11:11:12 작성 2021-09-15 11:17:20 수정됨

    체크박스 커스텀 하는거야 검색하셨으니 방식은 아시겠고 저 디자인만 필요하신거면

    이미지가 편하긴 한데 아니면 만들어야죠..

    <div class="box"></div>
    .box{
      position: relative;
      width: 90px;
      height: 100px;
      background-color: #FFC90C;
      border-radius: 10px;
    }
    
    .box::after{
      content: "";
      position: absolute;
      width: 40px;
      height: 45px;
      border : 10px solid #fff;
      border-radius: 5px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
    }

    이런식으로하면 되긴합니다만 (사이즈나 색은 대강 찍어서했습니다.)

    https://jsbin.com/voqavukigu/2/edit?html,css,output

    * 결과 이미지가 안올라가네요;

  • 아이스
    58
    2021-09-15 12:54:40

    사랑합니다 선배님들♡♡

  • 로그인을 하시면 답변을 등록할 수 있습니다.