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

Question

구글링 하면 체크박스 커스텀 하는 방법이 나오는데요.저렇게 동그라미가 겹쳐있는 모양을 만들려면 어떻게 해야 할까요?저 모양 이미지 파일이 없어서 배경이미지로 넣을 수 없습니다.체크시에 저 모양이 나와야 합니다.ㅠㅠ

doru · Answer

엄... 그냥 체크된거랑 체크안된거 따로 이미지 만들고 백그라운드로 넣어줘야합니다.cheked 되면 체크된 이미지로 나오게.. css를 짜야죠..사실 방법이야 여러가지긴한데..

개봉박살 · Answer

체크박스 자체 디자인을 변경하는방법은 제가 아는 한 없습니다.그래서 다른요소들로 디자인하고 체크박스를 컨트롤하는 자바스크립트를 짭니다.그리고 대상 체크박스는 숨기죠.... 부트스트랩이나 시멘틱-UI, 머테리얼-UI 전부 제가 말씀드린 방식으로 구현했더라구요

lilliilll · Answer

체크박스 커스텀 하는거야 검색하셨으니 방식은 아시겠고 저 디자인만 필요하신거면이미지가 편하긴 한데 아니면 만들어야죠..

.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 * 결과 이미지가 안올라가네요;

아이스 · Answer

사랑합니다 선배님들♡♡

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

4개의 답변

#custom 목록