ปรับแต่ง Checkboxes และ Radio Buttons ด้วย Pure CSS

บางครั้งเมื่อสร้างฟอร์ม เราต้องใช้ checkbox และ radio button inputs เพื่อเก็บ preferences, ยอมรับ terms หรือ demographic data HTML input elements เช่น checkboxes หรือ radio buttons มี default appearance หากต้องการเปลี่ยนรูปลักษณ์ สามารถใช้ CSS ปรับแต่งลักษณะตามต้องการ บทความนี้จะแสดงตัวอย่างการปรับแต่ง checkbox และ radio input สำหรับฟอร์มหรือเว็บเพจ

HTML Setup

HTML skeleton code สำหรับ styling เหมือนกันทั้ง checkboxes และ radio buttons

Container หลักสำหรับ หนึ่ง checkbox/radio button คือ HTML label element ภายใน label จะมี input element พร้อม type ที่เหมาะสม และ span element แสดงสถานะการเลือก

<html> <head> <style> /* No CSS Here Yet. */ </style>> </head> <body> <h2>Radio Button and Checkbox CSS Example</h2> <label class="input">One <input type="radio" name="radio-example" checked="checked"> <span class="checkmark fill"></span> </label> <label class="input">Two <input type="radio" name="radio-example"> <span class="checkmark fill"></span> </label> <label class="input">Three <input type="radio" name="radio-example"> <span class="checkmark fill"></span> </label> <h2>Checkbox Example</h2> <label class="input">Four <input type="checkbox" name="radio-example"> <span class="checkmark fill"></span> </label> <label class="input">Five <input type="checkbox" name="radio-example"> <span class="checkmark fill"></span> </label> <script href="script.js"></script> </body> </html>

ชุดแรกคือ radio buttons ใช้เมื่อ user ต้องเลือก เพียงหนึ่ง จากหลายตัวเลือก ชุดที่สองคือ checkboxes ใช้เมื่อ user สามารถเลือกหลายตัวเลือกได้ หรือจุดที่ user ต้อง agree/disagree หรือ yes/no

HTML elements นี้มี default appearances หากต้องการปรับแต่ง สามารถใช้ CSS ได้!

CSS Setup

เพื่อเปลี่ยน styling ของ radio buttons หรือ checkboxes ต้องแยกปัญหาเป็นขั้นตอน:

1. ปรับแต่ง label
   1. Display property
   2. Position relative
   3. Cursor pointer
   4. Margin และ padding เพื่อความสวยงาม
2. ซ่อน default checkbox
   1. Display property
3. สร้าง container เป็น custom checkbox
   1. Height
   2. Width
   3. Background
   4. Position – absolute
   5. Top, left values
4. เพิ่ม special effect บน hover (เปลี่ยน background color)
5. เปลี่ยน background color เมื่อ checked
6. ซ่อน checkmark หรือ circle เมื่อไม่ checked
7. แสดง checkmark หรือ circle เมื่อ checked
8. จัดสไตล์ checkmark
9. จัดสไตล์ circle

ก่อนดูโค้ดแนะนำลองคิดเองจาก skeleton HTML และขั้นตอนข้างต้น

Solution Code:

<html> <head> <style> /* Customize the label (the input) */ label { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox container */ .checkmark, .link { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } /* Add border radius for the radio button */ .circle { border-radius: 50%; } /* On mouse-over, add a background color */ label:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ label input:checked ~ .checkmark { background-color: #2196F3; } /* Create the checkmark/circle (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ label input:checked ~ .checkmark:after { display: block; } /* Style the checkmark */ label .checkmark:after { left: 10px; top: 3px; width: 5px; height: 15px; border: solid white; border-width: 0 3px 3px 0; /* always check to see if you need to use the css browser prefixes */ -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* Style the radio button circle */ label .circle:after { width: 15px; height: 15px; /* since .circle and .checkmark are technically the same element, we have to set border none otherwise an unwanted checkmark will show up on screen */ border: none; background: white; border-radius: 50%; left: 20%; top: 20%; } </style> </head> <body> <h2>CSS Radio Button and Checkbox Example</h2> <label class="input">One <input type="radio" name="radio-example" checked> <span class="checkmark circle"></span> </label> <label class="input">Two <input type="radio" name="radio-example"> <span class="checkmark circle"></span> </label> <label class="input">Three <input type="radio" name="radio-example"> <span class="checkmark circle"></span> </label> <h2>Checkbox Example</h2> <label class="input">Four <input type="checkbox" name="radio-example" checked> <span class="checkmark"></span> </label> <label class="input">Five <input type="checkbox" name="radio-example"> <span class="checkmark"></span> </label> <label class="input">Six <input type="checkbox" name="radio-example"> <span class="checkmark"></span> </label> </body> </html>

ครับ ตัวอย่าง radio buttons และ checkboxes ด้วย CSS อาจดูซับซ้อนตอนแรก แต่จะเข้าใจได้! หากทำ exercise นี้สำเร็จ พร้อมสำหรับหัวข้อที่ยากกว่านี้แล้ว