Убираем пунктирную рамку у ссылки

По умолчанию, когда ссылка находится в активном состоянии или при наведении, появляется пунктирная линия (или сплошная рамка) вокруг нее, примерно как показано на рисунке ниже.

Пунктирная рамка у ссылки

Это используется в качестве указателя для пользователей, которые имеют доступ к сайту только с клавиатуры, технически с помощью клавиши табуляции Tab. Контур показывает пользователям, что они в настоящее время фокусируются на определенном элементе. Тем не менее, иногда это может сильно навредить дизайну сайта, поэтому с помощью следующих правил CSS можно избавиться от такого эффекта.

1
2
3
a:hover, a:active, a:focus {
    outline: 0;
}

Стилизация Outline

Однако мы также можем и управлять этим эффектом по своему усмотрению. Мы можем указать стиль контура, ширину и цвет. Учитывая пример из предыдущего рисунка, мы можем установить стиль контура, следующим образом.

1
2
3
4
a:active,  
a:focus {  
    outline: 2px solid #e9841d;  
}


Стилизация Outline

Или вовсе заменить выделение линией на фоновый цвет или картинку.

1
2
3
4
5
a:active,  
a:focus {  
    outline: 0;  
    backgrond-color: #e9841d;  
}


Применение фона к Outline

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!