แจก!!! Checkbox css สวย ๆ มัดรวมไว้ในไฟล์เดียว

หากใครกำลังมองหา CSS สวย ๆ สำหรับทำ Checkbox แล้วละก็ วันนี้ Onlymycode มีโค้ดไฟล์ CSS มาแจก ให้ท่าน ๆ สามารถโหลดไปใช้งานกันได้เลยผ่าน ปุ่ม Download ด้านล่าง

Download

See the Pen Checkbox CSS Example by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

ตัวอย่างการใช้งาน Checkbox CSS

เริ่มที่ เรียกใช้งาน  css file ใน Tag <header>....</header>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin = "anonymous">
<link rel="stylesheet" href="icheck-bootstrap.css">

ตัวอย่างการสร้างสร้าง checkbox ผ่าน css ของ icheck คือการเรียกใช้งาน DIV ที่ครอบ Input checkbox ไว้ เช่น <div class="checkbox icheck-success"></div>  และการกำหนด Id ให้กับ input และ label ให้สอดคล้องกัน

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div class="checkbox icheck-default">
                <input type="checkbox" checked id="icheck-default" />
                <label for="icheck-default">icheck-default</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="checkbox icheck-primary">
                <input type="checkbox" checked id="icheck-primary" />
                <label for="icheck-primary">icheck-primary</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="checkbox icheck-success">
                <input type="checkbox" checked id="icheck-success" />
                <label for="icheck-success">icheck-success</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="checkbox icheck-info">
                <input type="checkbox" checked id="icheck-info" />
                <label for="icheck-info">icheck-info</label>
            </div>
        </div>
    </div>
</div>