() translation by (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 ของเรา
1 |
input[type="checkbox"]:checked + label { |
2 |
|
3 |
}
|
และสำหรับท่านที่รู้สึกว่าต้องการคำแนะนำเพิ่ม เอาหล่ะ อ่านต่อไป
กลับมาที่เดิม สิ่งที่เรากำลังทำอยู่คืออะไร ลองมองดู 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 ดังโค้ดด้านล่าง
1 |
<input type="checkbox" /> |
2 |
<label>Styled Check Box</label> |
และก็ แม้คุณไม่รู้อะไรมากเกี่ยวกับอิลิเมนต์ <label> คุณต้องเชื่อม input และ label เข้าด้วยกัน สิ่งนี้ทำได้ด้วยการใช้คำสั่ง for="" และการใส่ input ID
1 |
<input type="checkbox" id="c1" name="cc" /> |
2 |
<label for="c1">Check Box 1</label> |
เราจะต้องเพิ่ม <span> เข้าไปภายใน label ด้วยซึ่งดูเหมือนเป็นความชอบส่วนตัวมากกว่าอย่างอื่น แต่ทั้งหมดนั้นจะกระจ่างเมื่อคุณได้อ่าน step ที่ 3
3. นี่คือสิ่งที่เรารอ การใส่ CSS นั่นเอง
นี่คือที่ที่ความสนุกเริ่มต้นขึ้น อย่างแรกที่เราต้องทำเลย ที่ซึ่งเป็นส่วนหลักของบทเรียนของเรา คือการซ่อนตัว checkbox เดิม
1 |
input[type="checkbox"] { |
2 |
display:none; |
3 |
}
|
และเมื่อดำเนินการแล้ว เราสามารถใส่สไตล์ให้กับ label ได้ แต่ถ้าเฉพาะเจาะจงเข้าไปอีกเราจะใส่กับ span ภายใน label เราจะทำมันในทางที่ทำให้ตัวเองนั้นสามารถควบคุมสิ่งต่างๆ ให้ได้ตำแหน่งที่แน่นอนภายใน checkbox และถ้าไม่ใช้มัน เราสามารถใช้ background image ใน label ได้โดยตรง และการวางตำแหน่งมันเหมือนจะทำให้งานนั้นดูยากขึ้นมาโดยทันที
1 |
input[type="checkbox"] { |
2 |
display:none; |
3 |
}
|
4 |
input[type="checkbox"] + label span { |
5 |
display:inline-block; |
6 |
width:19px; |
7 |
height:19px; |
8 |
background:url(check_radio_sheet.png) left top no-repeat; |
9 |
}
|
อ่า ใช้ได้ มาดูคำอธิบายโค้ดไวๆ กัน อย่างแรกเลยสังเกตที่ background เรามี sprite sheet สำหรับงานนี้ ดังนี้สิ่งที่เราต้องทำคือตั้งค่าตำแหน่งของ background ให้ตรงกับ sprite ของอิลิเมนต์ span นั้น อิลิเมนต์ span ด้วยตัวมันเอง มันจะมีความกว้างเฉพาะ และ ความสูงเฉพาะในแต่ละ sprite ใน sheet เพื่อให้มันง่ายในการบอกแต่ละสถานะ
นี่คือสิ่งที่ CSS ที่เหลือตามมา ระบุเฉพาะที่เกี่ยวกับการสไตลต์ นี่คือส่วนสำหรับสุนทรียศาสตร์เน้นๆ และเจาะจงกับรูปแบบของเราเองหรือการออกแบบโดยรอบ
1 |
input[type="checkbox"] { |
2 |
display:none; |
3 |
}
|
4 |
input[type="checkbox"] + label span { |
5 |
display:inline-block; |
6 |
width:19px; |
7 |
height:19px; |
8 |
margin:-2px 10px 0 0; |
9 |
vertical-align:middle; |
10 |
background:url(check_radio_sheet.png) left top no-repeat; |
11 |
cursor:pointer; |
12 |
}
|
4. ทำให้มันใช้งานได้จริง
มันมีงานที่เหลือไม่มาก ดังนั้นต้องรวมสิ่งเหล่านี้เข้าด้วยกัน สิ่งสุดท้ายที่คุณต้องทำคือให้สถานะของอิลิเมนต์เมื่อ input นั้นถูก checked และ สำหรับสถานะเมื่อ hover นั้นจะทำหรือไม่ทำก็ได้ (optional) นี่ค่อนข้างง่ายดายเลย ลองมาดูโค้ดดู
1 |
input[type="checkbox"] { |
2 |
display:none; |
3 |
}
|
4 |
input[type="checkbox"] + label span { |
5 |
display:inline-block; |
6 |
width:19px; |
7 |
height:19px; |
8 |
margin:-2px 10px 0 0; |
9 |
vertical-align:middle; |
10 |
background:url(check_radio_sheet.png) left top no-repeat; |
11 |
cursor:pointer; |
12 |
}
|
13 |
input[type="checkbox"]:checked + label span { |
14 |
background:url(check_radio_sheet.png) -19px top no-repeat; |
15 |
}
|
สังเกตว่าเราใช้ sprite sheet สิ่งที่เตรียมมาทั้งหมดคือเปลี่ยนตำแหน่ง background สิ่งที่เราทำเกี่ยวกับสไตล์นั้นก็คือ label span เมื่อคุณทำการ check บนปุ่ม checkbox/radio button นั่นคือการใส่สถานะ CSS3 :checked pseudo selector นั่นเอง
สั้นๆ เกี่ยวกับ Browser Support
Pseudo selector นั้นมีการสนับสนุนที่ดีเยี่ยมกับบราวเซอร์ปัจจุบันแทบทุกตัว แม้จะมีหลุดบ้างแต่โค้ด fallback นั้นก็ยังให้ผลลัพธ์ออกมาดี
บราวเซอร์บน Mobile รุ่นแรกๆ ก็ มีปัญหาแบบนี้ การ support ของการใช้ :checked นั้นไม่เคลียร์และ Safari บน Mobile รุ่น pre iOS 6 ก็ยังไม่ support มันด้วย ดังตัวอย่าง
บทสรุป
ตกลงเราทำเสร็จแล้ว ใช่ไหม แน่นอนเพียงแค่ตรวจทานอีกรอบนึง อย่างแรกเลยคือ HTML
1 |
<input type="checkbox" id="c1" name="cc" /> |
2 |
<label for="c1"><span></span>Check Box 1</label> |
ที่คุณเขียนนั่นเหมือนกันไหม อย่าลืมที่จะเพิ่ม <span> ให้กับมัน เมื่อทำการทดลองด้วยตัวคุณเอง เรานั้นนำแนะให้คุณอาจลองวิธีการใหม่ๆ ในการใส่มันสำหรับส่วนนี้ดู เรานี่อยากเห็นเลยว่ามันจะสามารถทำงานได้อย่างมีประสิทธิภาพมากยิ่งขึ้นไหม มาดูส่วน CSS กัน
1 |
input[type="checkbox"] { |
2 |
display:none; |
3 |
}
|
4 |
input[type="checkbox"] + label span { |
5 |
display:inline-block; |
6 |
width:19px; |
7 |
height:19px; |
8 |
margin:-2px 10px 0 0; |
9 |
vertical-align:middle; |
10 |
background:url(check_radio_sheet.png) left top no-repeat; |
11 |
cursor:pointer; |
12 |
}
|
13 |
input[type="checkbox"]:checked + label span { |
14 |
background:url(check_radio_sheet.png) -19px top no-repeat; |
15 |
}
|
ทุกสิ่งทุกอย่างแสดงออกมาได้เป็นอย่างดี เยี่ยมมาก จำไว้ว่าสไตล์ส่วนส่วนมากถูกระบุในส่วนที่สร้างไว้ในไฟล์ demo ผมแนะนำให้คุณสร้างของคุณเอง และทำการทดลองเกี่ยวกับมัน เกี่ยวกับการวางตำแหน่ง และ การแสดงรูปแบบนั้นออกมา
สรุปส่วนที่สำคัญที่สุดก็คือ CSS ที่เขียนไว้ตั้งแต่ต้นนั่นแหละ
1 |
input[type="checkbox"]:checked + label { |
2 |
|
3 |
}
|
ด้วยการใช้สิ่งนี้ คุณสามารถสร้างสิ่งที่เป็นไปได้มากมายด้วยการใช้ :checked กับ checkbox และ radio สำหรับการใช้มันกับ form แต่ผมจะปล่อยให้คุณทดลองสิ่งเหล่านั้นด้วยตัวคุณเอง บางอย่างที่น่าทดลองคือ
- ลองเพิ่ม spritesheet ให้เป็นขนาด 2x เท่าสำหรับ retina screen ดูสิ
- ลองใช้ SVG แทน bitmap ดู
ผมหวังว่าคุณจะสนุกกับบทเรียนสั้นๆ อันนี้นะ และหวังว่าคุณจะได้รับความรู้และนำไปพัฒนาหรือประยุกต์ใช้มันได้อย่างดี
