Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Quick Tip - มาใส่ CSS3 ให้กับ Checkbox และ Radio Button แบบง่ายๆ กัน

by
Length:LongLanguages:

Thai (ภาษาไทย) translation by Porrapat Petchdamrongskul (you can also view the original English article)

เราจะใส่ CSS style ให้กับ checkbox และ radio button ได้อย่างไรโดยไม่ใช้ JavaScript รู้ไหมว่า CSS3 ล้วนๆ นั้นก็ทำได้ และเราจะมาดูวิธีการเหล่านี้กัน

ถ้าคุณมองหากราฟิกสำเร็จรูปที่จะเอามาใส่ Element ให้กับ form UI ของคุณ ลองดูที่ UI kit Element บนเว็บ Envato ของเราสิ แต่ถ้าไม่อยากซื้อหล่ะก็ หากาแฟซักแล้วแล้วทำตาม tutorial นี้กันเองเลย

1. ทำความเข้าใจในขั้นตอนการทำกันก่อน

บทความที่แนะนำ CSS Selector 30 ตัวที่ควรจำ (มีภาษาไทยแล้ว)

สำหรับผู้ที่มั่นใจในฝีมือการเขียน CSS ของตนเองอยู่แล้ว เรามีวิธีที่จะพาคุณไปตรงๆ เลย โค้ดสั้นๆ ส่วนนี้คือส่วนที่สำคัญที่สุดใน tutorial ของเรา

และสำหรับท่านที่รู้สึกว่าต้องการคำแนะนำเพิ่ม เอาหล่ะ อ่านต่อไป

กลับมาที่เดิม สิ่งที่เรากำลังทำอยู่คืออะไร ลองมองดู CSS3 ส่วนเตะตาส่วนนี้ :checked ที่เป็น pseudo selector เราสามารถระบุอิลิเมนต์เป้าหมายมันด้วยสถานะติ้กแล้ว (checked) หรือยังไม่ได้ติ้ก (unchecked) ได้  เราสามารถใช้เครื่องหมาย + ที่เป็น adjacent sibling selector ของ CSS2.1 เพื่อระบุอิลิเมนต์เป้าหมายของ checkbox หรือ radio อันนี้ ในกรณีนี้เราใส่ให้กับ label

2. เริ่มเขียนส่วนของ HTML

ถัดไป เราจะเริ่มด้วยการเขียนส่วนไฟล์ HTML และ CSS กัน (หรือจะใช้เครื่องมือเขียน CSS อื่นๆ ก็ได้) โดยทำให้มัน work เราจะสมมุติว่าคุณเคยทำสิ่งพื้นฐานง่ายๆ มาแล้วละกัน และเราจะไม่กล่าวถึงมันอีก

สำหรับจุดประสงค์เหล่านี้ในการทำให้งานคุณตรงเป้าหมาย เราจะแสดงเทคนิคนี้ให้คุณดูบน checkbox ก่อน แต่วิธีการทำกับ radio button นั้นก็ใช้แบบเดียวกัน และแน่นอนเรามี source code ไว้ให้แล้วด้วย

โอเค จะเริ่มกันยัง เริ่มด้วยการสร้าง checkbox input ตามด้วย label ดังโค้ดด้านล่าง

และก็ แม้คุณไม่รู้อะไรมากเกี่ยวกับอิลิเมนต์ <label> คุณต้องเชื่อม input และ label เข้าด้วยกัน สิ่งนี้ทำได้ด้วยการใช้คำสั่ง for="" และการใส่ input ID

เราจะต้องเพิ่ม <span> เข้าไปภายใน label ด้วยซึ่งดูเหมือนเป็นความชอบส่วนตัวมากกว่าอย่างอื่น แต่ทั้งหมดนั้นจะกระจ่างเมื่อคุณได้อ่าน step ที่ 3

3. นี่คือสิ่งที่เรารอ การใส่ CSS นั่นเอง

นี่คือที่ที่ความสนุกเริ่มต้นขึ้น อย่างแรกที่เราต้องทำเลย ที่ซึ่งเป็นส่วนหลักของบทเรียนของเรา คือการซ่อนตัว checkbox เดิม

และเมื่อดำเนินการแล้ว เราสามารถใส่สไตล์ให้กับ label ได้ แต่ถ้าเฉพาะเจาะจงเข้าไปอีกเราจะใส่กับ span ภายใน label เราจะทำมันในทางที่ทำให้ตัวเองนั้นสามารถควบคุมสิ่งต่างๆ ให้ได้ตำแหน่งที่แน่นอนภายใน checkbox และถ้าไม่ใช้มัน เราสามารถใช้ background image ใน label ได้โดยตรง และการวางตำแหน่งมันเหมือนจะทำให้งานนั้นดูยากขึ้นมาโดยทันที

อ่า ใช้ได้ มาดูคำอธิบายโค้ดไวๆ กัน อย่างแรกเลยสังเกตที่ background เรามี sprite sheet สำหรับงานนี้ ดังนี้สิ่งที่เราต้องทำคือตั้งค่าตำแหน่งของ background ให้ตรงกับ sprite ของอิลิเมนต์ span นั้น อิลิเมนต์ span ด้วยตัวมันเอง มันจะมีความกว้างเฉพาะ และ ความสูงเฉพาะในแต่ละ sprite ใน sheet เพื่อให้มันง่ายในการบอกแต่ละสถานะ

Our sprite sheet
sprite sheet ของเรา

นี่คือสิ่งที่ CSS ที่เหลือตามมา ระบุเฉพาะที่เกี่ยวกับการสไตลต์ นี่คือส่วนสำหรับสุนทรียศาสตร์เน้นๆ และเจาะจงกับรูปแบบของเราเองหรือการออกแบบโดยรอบ

4. ทำให้มันใช้งานได้จริง

มันมีงานที่เหลือไม่มาก ดังนั้นต้องรวมสิ่งเหล่านี้เข้าด้วยกัน สิ่งสุดท้ายที่คุณต้องทำคือให้สถานะของอิลิเมนต์เมื่อ input นั้นถูก checked และ สำหรับสถานะเมื่อ hover นั้นจะทำหรือไม่ทำก็ได้ (optional) นี่ค่อนข้างง่ายดายเลย ลองมาดูโค้ดดู

สังเกตว่าเราใช้ sprite sheet สิ่งที่เตรียมมาทั้งหมดคือเปลี่ยนตำแหน่ง background สิ่งที่เราทำเกี่ยวกับสไตล์นั้นก็คือ label span เมื่อคุณทำการ check บนปุ่ม checkbox/radio button นั่นคือการใส่สถานะ CSS3 :checked pseudo selector นั่นเอง

สั้นๆ เกี่ยวกับ Browser Support

Pseudo selector นั้นมีการสนับสนุนที่ดีเยี่ยมกับบราวเซอร์ปัจจุบันแทบทุกตัว แม้จะมีหลุดบ้างแต่โค้ด fallback นั้นก็ยังให้ผลลัพธ์ออกมาดี

Can I use data for pseudo selectors
ข้อมูลจากเว็บ Can I Use สำหรับ pseudo selectors ทั่วๆ ไป
IE9 on Windows 7
การแสดงผล Fallback ของ IE9 ที่รันบน Windows 7

บราวเซอร์บน Mobile รุ่นแรกๆ ก็ มีปัญหาแบบนี้ การ support ของการใช้ :checked นั้นไม่เคลียร์และ Safari บน Mobile รุ่น pre iOS 6 ก็ยังไม่ support มันด้วย ดังตัวอย่าง

บทสรุป

ตกลงเราทำเสร็จแล้ว ใช่ไหม แน่นอนเพียงแค่ตรวจทานอีกรอบนึง อย่างแรกเลยคือ HTML

ที่คุณเขียนนั่นเหมือนกันไหม อย่าลืมที่จะเพิ่ม <span> ให้กับมัน เมื่อทำการทดลองด้วยตัวคุณเอง เรานั้นนำแนะให้คุณอาจลองวิธีการใหม่ๆ ในการใส่มันสำหรับส่วนนี้ดู เรานี่อยากเห็นเลยว่ามันจะสามารถทำงานได้อย่างมีประสิทธิภาพมากยิ่งขึ้นไหม มาดูส่วน CSS กัน

ทุกสิ่งทุกอย่างแสดงออกมาได้เป็นอย่างดี เยี่ยมมาก จำไว้ว่าสไตล์ส่วนส่วนมากถูกระบุในส่วนที่สร้างไว้ในไฟล์ demo ผมแนะนำให้คุณสร้างของคุณเอง และทำการทดลองเกี่ยวกับมัน เกี่ยวกับการวางตำแหน่ง และ การแสดงรูปแบบนั้นออกมา

สรุปส่วนที่สำคัญที่สุดก็คือ CSS ที่เขียนไว้ตั้งแต่ต้นนั่นแหละ

ด้วยการใช้สิ่งนี้ คุณสามารถสร้างสิ่งที่เป็นไปได้มากมายด้วยการใช้ :checked กับ checkbox และ radio สำหรับการใช้มันกับ form แต่ผมจะปล่อยให้คุณทดลองสิ่งเหล่านั้นด้วยตัวคุณเอง บางอย่างที่น่าทดลองคือ

  • ลองเพิ่ม spritesheet ให้เป็นขนาด 2x เท่าสำหรับ retina screen ดูสิ
  • ลองใช้ SVG แทน bitmap ดู

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.