אינדיקטור המיקוד, שמסומן לעיתים קרובות על ידי "טבעת מיקוד", מזהה את הרכיב שמוגדר כרכיב המיקוד בדף. למשתמשים שלא יכולים או לא רוצים להשתמש בעכבר, האינדיקטור הזה חשוב מאוד, כי הוא מחליף את מצביע העכבר.
אם סימן המיקוד שמוגדר כברירת מחדל בדפדפן מתנגש עם העיצוב שלכם, אתם יכולים להשתמש ב-CSS כדי לשנות את הסגנון שלו. חשוב לזכור להתחשב במשתמשים.
שימוש ב-:focus כדי להציג תמיד את אינדיקטור המיקוד
הפסאודו-קלאס :focus מוחל על רכיבים במצב ממוקד, ללא קשר לשיטת הקלט או למכשיר (כמו עכבר, מקלדת או סטיילוס) שנמצאים בשימוש.
לדוגמה, לרכיב <div> הבא יש tabindex שמאפשר להתמקד בו, עם סגנון מותאם אישית למצב :focus שלו:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
לא משנה באיזה מכשיר משתמשים, הסמל <div> נראה אותו דבר כשהוא במצב מודגש.
לצערנו, יש הבדלים בין הדפדפנים באופן שבו הם מיישמים את המיקוד. היכולת של רכיב לקבל מיקוד עשויה להיות תלויה בדפדפן ובמערכת ההפעלה.
לדוגמה, ל<button> הבא יש CSS מותאם אישית למצב :focus שלו.
button:focus {
outline: 4px dashed orange;
}
אם לוחצים על <button> באמצעות העכבר ב-Chrome ב-macOS, אמור להופיע סגנון המיקוד המותאם אישית שלו. עם זאת, לא תראו את סגנון ההדגשה המותאם אישית אם תלחצו על <button> ב-Safari ב-macOS. הסיבה לכך היא שב-Safari האלמנט לא מקבל מיקוד כשלוחצים עליו.