עיצוב מותאם-אישית לתיבות בחירה (drop-downs)

הפקד שאולי הכי פחות גמיש לעיצוב חופשי ב-HTML הוא תג ה-SELECT, שהשליטה על ה-CSS שלו היא מוגבלת ביותר – לא מאפשרת לשחק עם הצורה שהחץ נראה, באקספלורר גם השליטה על המסגרת והרקע שלו בעייתי, וכדומה.

לאחרונה נתקלתי בטריק פנטסטי שמאפשר גמישות מקסימאלית בעיצוב של תיבת הבחירה באמצעות CSS וטיפה התערבות של JS, כשהשליטה למעשה מתאפשרת רק על המצב הסגור של הפקד, בלי שליטה על המצב הפתוח.

יש שיראו בזה חיסרון, כי אי אפשר לעצב את התפריט הנפתח, אבל מהזווית שלי – ברוב המקרים זה דווקא יתרון, כי ב-iOS ומערכות שמתערבות בעצמן בניראות של התפריט הנפתח – ההתנהגות נשמרת, ולא נשברת כמו שהיה קורה אם היינו משתמשים בפיתרון חלופי לקומבו מעוצב (שמורכב מ-DIVs במקום תג SELECT).

הרעיון הכללי הוא כזה: נותנים opacity:0 לתג ה-SELECT, מה שגורם שבמצב סגור הוא בלתי נראה אך עדיין לגמרי מגיב לקליק עליו, ושמים במקומו DIV שיכיל את תצוגת האופציה הבחורה והחץ כלפי מטה, שכמובן אותו אפשר לעצב ככל העולה על רוחנו.

את ה-DIV נמקם מבחינת השכבות מאחרי ה-SELECT השקוף, כך שקליק על האזור הזה יפתח את התפריט של ה-SELECT, וכך השגנו את מבוקשינו.

ההתערבות הסקריפטית היחידה היא שבקליק על אפשרות בתפריט הנפתח – צריך לעדכן את הטקסט של ה-DIV כדי שהגולש יראה את האפשרות שבחר.

אפשר כמובן גם להריץ לולאה שתייצר אוטומטית את ה-DIV לכל תג SELECT, אבל בדוגמאת קוד אני מתמקד במה שהכרחי לטריק הזה, פינוקים כל אחד יכול להוסיף לפי הסגנון שלו 🙂

מספיק עם הדיבורים – בואו נראה קצת קוד:

אציין שכבר הטמעתי את זה ב-2 אתרים, ובדקנו את זה על הרבה דפדפנים וסביבות, וזה פשוט עובד יוצא מן הכלל…

קרדיט לפוסט המקורי שבו נתקלתי בטריק הזה:
http://thephuse.com/development/custom-styling-for-select-menus/
לקחתי משם את הרעיון וחלק מדוגמאות הקוד