에티테마
미디어 | 무료템플릿자료실 | 포트폴리오

CSS 네이티브 형식의 이쁜 라디오버튼, 체크박스등

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 65회 작성일 19-11-01 16:16
라이센스 MIT
데모 데모 (10)
다운로드 다운로드 (6)
개발사 https://hunzaboy.github.io/CSS-Checkbox-Library/

본문

유튜브주소 : https://youtu.be/m3d99kiDt1g
데모 버전에서는 아래처럼 3가지를 불러들이지만 ...

    <link rel="stylesheet" href="demoDist/demo.css">
    <link rel="stylesheet" href="demoDist/prism.css">
    <link rel="stylesheet" href="dist/css/checkboxes.css">

한가지만 불러들여서 사용하시면 됩니다. 유튜브 영상을 확인해보시면 checkboxes.css 만 적용된것을 확인할 수 있습니다.

<link rel="stylesheet" href="dist/css/checkboxes.css">

해당 클래스값을 사용하여 적용할 수 있습니다. 데모버전과 동일합니다.

            <div class="item">
                <div class="dark">
                    <div class="ckbx-style-1">
                        <input type="checkbox" id="ckbx-style-1-1" value="0" name="ckbx-style-1">
                        <label for="ckbx-style-1-1"></label>
                    </div>
                </div>
                <div class="light">
                    <div class="ckbx-style-1">
                        <input type="checkbox" checked id="ckbx-style-1-2" value="0" name="ckbx-style-1">
                        <label for="ckbx-style-1-2"></label>
                    </div>
                </div>
                <a href="#generateCode" class="show-code">Get HTML</a>
            </div>
            <div class="item">
                <div class="dark">
                    <div class="ckbx-style-2">
                        <input type="checkbox" id="ckbx-style-2-1" value="0" name="ckbx-style-2">
                        <label for="ckbx-style-2-1"></label>
                    </div>
                </div>
                <div class="light">
                    <div class="ckbx-style-2">
                        <input type="checkbox" checked id="ckbx-style-2-2" value="0" name="ckbx-style-2">
                        <label for="ckbx-style-2-2"></label>
                    </div>
                </div>
                <a href="#generateCode" class="show-code">Get HTML</a>
            </div>

class 값을 보시게 되면 색상값으로 dark 와 light 두가지를 볼 수 있으며
ckbx-style-1
ckbx-style-1-1 ... 처럼 되어 있습니다.
데모를 확인하신 후에 ckbx-style-N 을 적용해서 사용할 수 있을것 같습니다.



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

Total 39건 1 페이지

카테고리

카테고리
 질문답변
 팁게시판
 영카트팁
 그누M팁
자료실

프리미엄

프리미엄

최근이미지리스트

최근이미지리스트