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

페이지 정보

작성자

댓글 0건 작성일 19-11-01 16:16


라이센스	MIT
데모	데모 (3174)
다운로드	다운로드 (3113)
개발사	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>