checkbox3 input checkbox 체크박스를 이용한 부트스트랩 아이콘 토글 체크박스 안에 부트스트랩 아이콘 토글 .ckPrice input[type='checkbox'], .star input[type='checkbox'] { display: none; } .ckPrice input[type='checkbox'] + span::after { display:block; content:'\F584'; font-family:"bootstrap-icons", sans-serif; font-size:1rem; color:white; cursor: pointer; width: 24px; height: 24px; } .ckPrice input[type='checkbox']:checked + span::after { content:'\F26D' } .sta.. 2024. 4. 29. input checkbox 만들기 동의부트스트랩 체크 아이콘을 배경 이미지로 넣어 사용함 input[type='checkbox'] { display:flex; align-items:center; justify-content:center; margin-top:1px; margin-right:15px; padding:0; border:1px solid #bbb; outline:none;min-width: 24px; width:24px; height:24px; cursor:pointer; appearance:none } input[type='checkbox']::after { display:none; font-family:"bootstrap-icons", sans-serif; font-size:1rem; font-weight:bold; col.. 2024. 4. 25. input checkbox 스위치모양 아이디 저장.switch { cursor:pointer; color: #E8E8E8; display: inline-flex;align-items: center; font-size: 18px;} .switch input[type="checkbox"] { position: relative; border: 0; border-radius: 1.25em; width: 48px; height: 24px; background-color: #6b768b; } .switch input[type="checkbox"]::before { content: ""; position: absolute; left: 4px;top:4px; width: 16px; height: 16px; border-radius: 50%; backg.. 2024. 4. 25. 이전 1 다음
