אתם רוצים שהאתר שלכם ייראה מעודכן, נכון? אז אחרי שלמדתם להשתמש בפונטים מגניבים באתר שלכם, יש עוד דבר מגניב שתוכלו לעשות: לשנות את צבע "הבחירה".

אחד הדברים המגניבים שיש ב- css3, הלא הוא תקן ה-css החדש, זה שינוי צבע הבחירה.
אם עד לא מזמן בכל הדפדפנים אפשר היה להעתיק טקסט -או יותר נכון לבחור אותו- רק בצבע התכלת הבהיר המשעמם, ובכן, לא עוד. כעת, עם תקן ה-css3 (שכבר פה די ממזמן, זה רק שהדפדפנים התחילו לתמוך בו בצורה נרחבת…), הדפדפנים יציגו את צבע הבחירה שתגדירו לו. וזה ממש ממש קל.

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

למה לשנות אותו?
1. ככה. כי בא לי!
2. כי עכשיו אפשר. כל הדפדפנים הנורמליים כבר תומכים בזה!
3. כי זה נראה מעודכן.
4. ואולי הכי חשוב: עיצובית- כי ניתן כך לעשות התאמת צבעים יותר אבסולוטית לצבעי האתר!

מה הם דרישות המערכת?
בגדול, רק דפדפני פי.סי. (ומקינטושים) חדשים יכולים להציג את הפיצ'ר הזה. הפיצ'ר לא נתמך במערכות הפעלה לניידים וטאבלטים. כמו"כ, אל תנסו עם איכספלורר 7 ומטה. (ולא שאני נגד, אני סתם מתעלם..). יותר מאשמח לתגובות איך נראה אצלכם!

טוב. הבנתי, הבנתי. איך עושים את זה?

אז קדימה, לעבודה!

1. פתחו את קובץ ה-css של האתר. אם חילקתם את האתר לכמה קבצי css, פתחו את הראשי, הזה שמתייחס בואו נגיד לתג ה-Body.

2. כל שעליכם לעשות הוא להדביק את 2 השורות הבאות לתוך קוד ה- css שלכם, ולשמור:

::selection {
   background: #ec8500; /* Safari */
        color: #ffffff;
}
::-moz-selection {
   background: #ec8500; /* Firefox */
        color: #ffffff;
}

* שימו לב שאתם שמים את השורה לא באמצע הגדרה, זאת אומרת מחוץ לסוגריים…
** המספר אחרי הסולמית ממחיש את הצבע. המספר של ה-background הוא סוג של כתום. ניתן גם לכתוב red#, או green#  וכו'
*** השורה השנייה היא אותה ההגדרה, אך לצב הטקסט. במקרה דנן הוא לבן.
****שימו לב שהקוד כתוב פעמיים, כי דפדפן מוזילה פיירפוקס, צריך להיות מיוחד…
***** ניתן להגדיר את הבחירה גם לסלקטורים, ולתגיות html מסויומות כמו <p> וכו', אבל אני יותר אוהב אחידות. כל האתר, או כלום. ההגדרה שכתבתי היא לכל האתר.

3. זה הכל!

4. תהנו.

 5. נערך: 21.06.12, הוספתי את הצבע של הטקסט עצמו בבחירה.