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

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

Download

See the Pen Radio button 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">

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

<div class="container">
   <div class="row">
        <div class="col-sm-3">
            <div class="radio icheck-default">
                <input type="radio" id="default1" name="default" />
                <label for="default1">Option 1</label>
            </div>
            <div class="radio icheck-default">
                <input type="radio" checked id="default2" name="default" />
                <label for="default2">Option 2</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="radio icheck-primary">
                <input type="radio" checked id="primary1" name="primary" />
                <label for="primary1">Option 1</label>
            </div>
            <div class="radio icheck-primary">
                <input type="radio" id="primary2" name="primary" />
                <label for="primary2">Option 2</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="radio icheck-success">
                <input type="radio" id="success1" name="success"/>
                <label for="success1">Option 1</label>
            </div>
            <div class="radio icheck-success">
                <input type="radio" checked id="success2" name="success"/>
                <label for="success2">Option 2</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="radio icheck-info">
                <input type="radio" checked id="info1" name="info" />
                <label for="info1">Option 1</label>
            </div>
            <div class="radio icheck-info">
                <input type="radio" id="info2" name="info" />
                <label for="info2">Option 2</label>
            </div>
        </div>
    </div>
</div>