ตัวอย่างช่องเลือก CSS & JavaScript ฟรี 10 รายการ

กล่องเลือก HTML เริ่มต้นใช้งานได้ดีมานานหลายทศวรรษ แต่ในยุคปัจจุบัน มันยุติธรรมที่จะบอกว่ามัน… ล้าสมัยไปหน่อย

นักออกแบบสามารถทำได้ดีกว่า และด้วยความก้าวหน้าใน CSS ทำให้ง่ายต่อการปรับแต่งกล่องเลือก ไม่ต้องพูดถึงรหัสโอเพ่นซอร์สทั้งหมดที่มีให้ทางออนไลน์ฟรี

ฉันได้รวบรวมคอลเลกชัน 10 อันดับแรกของฉันสำหรับสไตล์กล่องเลือกแบบแฮนด์เมด สิ่งเหล่านี้ไม่ได้เผยแพร่เป็นปลั๊กอิน แต่ใช้เทมเพลตสำหรับการปรับแต่ง JavaScript และ CSS แทน แต่ทั้งหมดนี้ติดตั้งง่ายและแม้กระทั่งการจัดรูปแบบใหม่เพื่อจุดประสงค์ของคุณเอง

1. เมนูเลือกเอง

การเริ่มต้นคอลเลกชันคือสไตล์เมนูเลือกที่กำหนดเองของ Wallace Erick

มันใช้ทั้ง CSS สำหรับ restyling และ JavaScript สำหรับการกำหนดค่า UX ของเมนู พวกเขาทำงานแตกต่างไปจากการเลือก HTML มาตรฐานเล็กน้อย และฉันคิดว่ามันน่าใช้กว่าเล็กน้อย

คุณสามารถเลือกขนาดและรูปแบบสีของเมนูหรือทำงานกับค่าเริ่มต้นของ Wallace เหนือสิ่งอื่นใด เขามีการออกแบบช่องอัปโหลดที่กำหนดเอง ซึ่งหากคุณเคยพยายามปรับรูปแบบ คุณจะรู้ว่ามันยาก

เป็นจุดเริ่มต้นที่ยอดเยี่ยมหากคุณต้องการเพียงแค่เลือกเมนูที่ดูสะอาดตาและใช้งานได้จริง

2. เลือกง่าย

นี่เป็นอีกหนึ่งกล่องเลือกที่เรียบง่ายซึ่งมีจุดมุ่งหมายเพื่อผสมผสานอย่างเป็นธรรมชาติยิ่งขึ้นในทุกเลย์เอาต์

ขึ้นอยู่กับสีที่ละเอียดอ่อนกว่าด้วยโทนสีขาวดำธรรมดา แต่ยังใช้ JavaScript เพื่อทำให้เมนู Select เคลื่อนไหวทั้งในและนอกมุมมอง

ทำงานโดยกำหนดเป้าหมายช่องป้อนข้อมูลที่ซ่อนอยู่ซึ่งมีลักษณะ เหมือนกับ ช่องเลือก วิธีนี้ทำให้คุณยังคงดึงข้อมูลจากส่วนหน้าลงในแบบฟอร์มได้ เนื่องจากในทางเทคนิคแล้วโซลูชันนี้ไม่ได้ใช้องค์ประกอบ <select> จริง

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

3. ดรอปดาวน์ HTML ที่ไม่น่าสนใจ

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

เห็นได้ชัดว่าคุณสามารถลบคุณลักษณะนั้นในเค้าโครงของคุณเอง และยึดติดกับรูปแบบเดียวที่เหมาะกับไซต์ของคุณ แต่โดยรวมแล้วเมนูที่เลือกเหล่านี้ใช้งานได้เหมือนเมนูปกติและใช้งานได้ดี

หากคุณกังวลเกี่ยวกับความเข้ากันได้ ลองใช้เทมเพลตนี้

การเปลี่ยนแปลงส่วนใหญ่เป็นความสวยงาม ดังนั้นจึงไม่ควรส่งผลกระทบต่อพฤติกรรมของผู้ใช้มากนัก

4. ตัวยึดตำแหน่ง Select

การออกแบบที่แท้จริงของเมนูเลือกตัวยึดตำแหน่งนี้งดงาม แต่การออกแบบไม่ใช่ปัจจัยเดียวที่นี่

ผู้พัฒนา James Nowland ได้สร้างเมนูนี้โดยมีเป้าหมายเพื่อ ลบค่าเริ่มต้น ออกจากตัวเลือกการเลือก ซึ่งหมายความว่าจะทำงานเหมือนตัวยึดตำแหน่งในช่องข้อความที่คุณเห็นเมื่อช่องว่างเปล่า แต่เมื่อคุณตั้งค่าแล้ว ค่านั้นจะหายไป

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

5. การออกแบบแบน

สุนทรียศาสตร์มักมีความสำคัญในการออกแบบเว็บและเมนูการเลือกแบบเรียบนี้เป็นตัวอย่างที่ดี

มันยังคงทำงานเหมือนกับการเลือกทั่วไป และส่วนแบบเลื่อนลงไม่มีการเปลี่ยนแปลงเลย แต่การเลือกรูปแบบใหม่จะทำให้หน้าดูมีชีวิตชีวาขึ้น รู้สึกมีระดับมากกว่าค่าเริ่มต้นของเบราว์เซอร์ที่น่าเกลียดมาก

คุณยังสามารถใช้เทมเพลตนี้และขยายโดยใช้สไตล์เรียบๆ ของคุณเองกับพื้นที่ดรอปดาวน์ การโทรของคุณโดยสิ้นเชิง!

แต่เนื่องจากเป็นเทมเพลตเริ่มต้น นี่เป็นหนึ่งในตัวเลือกที่ง่ายที่สุดสำหรับอินเทอร์เฟซใดๆ

6. CSS บริสุทธิ์

ฉันเป็นแฟนตัวยงของ CSS ล้วนๆ เหนือ JavaScript เพราะมันทำให้กระบวนการออกแบบทั้งหมดง่ายขึ้น ไม่ใช่เรื่องง่าย แต่มีวิธีแก้ปัญหามากมาย

หนึ่งในรายการโปรดของฉันคือข้อมูลโค้ดนี้ที่ไม่ใช่แค่เมนูเลือก CSS ล้วนๆ เท่านั้น แต่ยังมีวิทยุและช่องทำเครื่องหมายอีกด้วย

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

7. ดรอปดาวน์ที่เข้าถึงได้สไตล์

นี่เป็นตัวอย่างเก๋ไก๋อีกตัวอย่างหนึ่งของสิ่งที่คุณสามารถทำได้ด้วยเมนูที่เลือก ตัวอย่างนี้สร้างโดย Andy Fitzsimon อาศัย JavaScript สำหรับเอฟเฟกต์แบบเลื่อนลงและใช้ CSS ที่กำหนดเองสำหรับการไล่ระดับสีและไอคอนลูกศร

ข้อดีคือเมนูนี้ยังรองรับฟีเจอร์ no-JS อีกด้วย ดังนั้นมันจึงทำงานแม้ว่า JavaScript จะปิดอยู่ก็ตาม เรียกว่าการย่อยสลายอย่างสง่างามและเป็นเพื่อนที่ดีที่สุดสำหรับการเข้าถึงของนักพัฒนาเว็บ

เมนูที่เลือกเหล่านี้ยังคงใช้การไล่ระดับเว็บ 2.0 แบบเก่าซึ่งอาจไม่เหมาะกับการออกแบบสำหรับปี 2017 และปีต่อๆ ไป

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

8. เมนูไอคอน SVG

เมนูการเลือกเริ่มต้นมีไอคอนลูกศรอยู่ด้านข้างและไม่มีอะไรมาก ด้วยเวทย์มนตร์ SVG เล็กน้อย คุณสามารถแปลงสิ่งนี้เป็นไอคอนอื่นๆ ได้ตามต้องการ

เมนูแบบกำหนดเองนี้มีการออกแบบไอคอนบวกของตัวเองที่ทำงานด้วยไฟล์ SVG ล้วนๆ เมื่อคุณคลิกเพื่อขยายเมนู เมนูจะเคลื่อนไหวเป็นไอคอน X เพื่อปิด/ซ่อน

ฉันไม่เคยเห็นอะไรแบบนี้มาก่อน และมันแสดงให้เห็นว่าเราได้ก้าวข้ามขีดจำกัดของเว็บเบราว์เซอร์มาไกลแค่ไหนแล้ว

น่าเสียดายที่สิ่งนี้ ไม่ ทำงานบนองค์ประกอบการเลือก HTML ดั้งเดิม เป็นคอลเล็กชันของรายการภายใน div ดังนั้นจึงต้องกำหนดเป้าหมายช่องป้อนข้อมูลที่ซ่อนอยู่ทุกครั้งที่เลือกค่า

โชคดีที่กระบวนการนั้นง่ายมาก ดังนั้นหากคุณต้องการให้การออกแบบนี้บนไซต์ของคุณ ก็ไม่ต้องดำเนินการมากเพื่อให้มันดำเนินไป

9. เลือกกล่องทดลอง

นี่คือการออกแบบทดลองที่ดึงดูดสายตาฉันจริงๆ หน้าจอสาธิตการเปรียบเทียบจะแสดงให้เห็นความแตกต่างของการเลือกเมนูปกติและการเปลี่ยนแปลงประสบการณ์ของผู้ใช้

เมื่อคุณแตะ/คลิกเพื่อเปิดเมนูครั้งแรก เมนูจะเลื่อนลงพร้อมเอฟเฟกต์แอนิเมชั่นเต็มรูปแบบ แต่จะไม่ซ่อนเว้นแต่คุณจะคลิกเมนูอีกครั้ง ซึ่งแตกต่างจากเมนูเลือกทั่วไปที่ซ่อนเมื่อคุณคลิกที่อื่นบนหน้า

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

10. Dark & ​​Light Selects

หากคุณรัก CSS ล้วนๆ และต้องการเลือกที่เก๋ไก๋ ลองดูโซลูชันนี้และลองใช้หนึ่งในนั้นเป็นเทมเพลตเริ่มต้น

พวกเขาทั้งคู่ใช้การไล่ระดับสี CSS สำหรับพื้นหลังและผสมผสานเมนูดรอปดาวน์เข้ากับสีด้านล่างของการไล่ระดับสี สิ่งนี้ไม่ได้ใช้ปลั๊กอิน JavaScript ใด ๆ ดังนั้นคุณสามารถทำสิ่งนี้ได้โดยใช้ CSS เพียงเล็กน้อยและความพยายามในการสร้างสรรค์

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