Лого www.SiteHere.ru

Как отредактировать точечное выделение в браузере

Точечное выделение в браузере

Наверняка вы замечали при выборе элемента на сайте, вокруг него появляется такое пунктирное выделение. Как на изображении выше. Иногда даже такие мелочи хотят быть изменены веб-дизайнерами, а главное это возможно. Также данное выделение появляется когда мы перемещаемся по сайту с помощью кнопки Tab на клавиатуре. Проверьте! В этом уроке мы исправим данное выделение на своё собственное.

Финальный результат можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

В HTML странице у нас будет лишь меню, на примере которого мы рассмотрим это выделение. Структура меню следующая:

1
2
3
4
5
6
7
8
9
10
11
<h4>Меню</h4>
<nav class="nav-outline">
    <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Категории</a></li>
        <li><a href="#">Дизайн</a></li>
        <li><a href="#">Портфолио</a></li>
        <li><a href="#">Сервисы</a></li>
    </ul>
</nav>

CSS часть

Чтобы задать произвольный стиль при выделении элемента необходимо использовать свойство outline в CSS. Делается это следующим образом:

1
2
3
4
.nav-outline a:focus {
    outline: 0;
    background-color: #e9841d;
}

Конечно можно задать лишь первое свойство, но для полноты эффекта, да и визуально лучше будет восприниматься, если мы выделим весь выбранный элемент.

Вывод

Казалось бы мелочь, но всегда стремишься чтобы на сайте всё было идеально :). Больше конечно это изменение заметят пользователи, которые используют клавиатуру для перемещения по сайту.

Успехов!

Источник: www.hongkiat.com

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *