วันนี่มี CSS Effect เล็กๆน้อยๆ ไว้ช่วยในเรื่อง UI เวลาเราเลือก checkbox แล้วอยากให้มี Highlight แสดง ตัวอย่างนี้แสดงแบบง่ายๆคือเมื่อเลือกแล้วให้ label แสดงตัวหนา เพื่อจะได้มีประโยชน์เวลารายการข้อมูลเยอะอาจจะลายตาจนทำให้ไม่รู้ว่าเราเลือกอะไรไปบ้าง โดยจะ support พวก web browsers ที่ทันสมัยใหม่ๆหน่อยครับ ผมลองทดสอบกับ Firefox ,Chrome และ Safari ไม่มีปัญหา แต่ IE 7-8 ใช้ไม่ได้ส่วน 9-10 คิดว่าน่าจะได้ครับ Highlight-label-if-checkbox-is-checked

ลอง copy code ตัวอย่างด้านล่างแล้วเอาไปรันดูครับ สังเกตจะมี CSS เล็กๆควบคุมอยู่

HTML

จากตัวอย่างเป็นทำตัวหนาแบบง่ายๆ อาจจะนำไปพัฒนาต่อเป็นมีสีพื้นหลัง หรือมีสีขอบอื่นๆอีกมากมายก็ได้ครับ หวังว่าคงมีประโยชน์กันครับ

Author:

(ตั้ม) ศิริชัย ธีรภัทรสกุล เป็นเว็บโปรแกรมเมอร์ และบล็อกเกอร์ สนใจเรื่องการพัฒนาตัวเอง หลงใหลการถ่ายรูป เวลาว่างมักชอบอ่านหนังสือ ปัจจุบันผมยังรับพัฒนาเว็บไซต์ หากสนใจสามารถติดต่อสอบถามได้ครับ