Создание пользовательского стиля фокуса

Когда вы создаете пользовательский стиль фокуса, вы должны думать о четырех вещах:

1. Добавление контура
2. Создание анимации, содержащей движение
3. Изменение цвета фона
4. Изменение цвета текста

Подробнее об этом я писал в своей статье о фокус проектирования. В ходе своего исследования я обнаружил три типа стиля фокусировки, которые мне понравились.

1. Тот, что в журнале Smashing Magazine
2. Тот, что на WTF Forms
3. Тот, что в Slack
   

Сегодня я хочу показать вам, как создавать эти стили фокуса и легко использовать их на своем веб-сайте.

Создание фокуса для Smashing Magazine

Smashing Magazine использует большой пунктирный контур для фокусировки. Чтобы создать этот стиль фокуса, вы устанавливаете outline собственность на 3px dotted.

*:focus {
  outline: 3px dotted #761b15;
}

См. перо Стиль фокусировки Smashing Mag (по умолчанию) Зелл Лью (@zellwk) на КодПен.

Если вы хотите изменить цвет контура, вы можете изменить outline-color имущество.

.red-background *:focus {
  outline-color: white;
}

См. перо Стиль фокусировки Smashing Mag (изменение цвета контура) Зелл Лью (@zellwk) на КодПен.

Кроме того, вы можете использовать переменные CSS.

:root {
  --outline-color: #761b15;
}

*:focus {
  outline: 3px dotted var(--outline-color);
}

.red-background {
  --outline-color: white;
}

См. перо Стиль фокуса Smashing Mag (с переменными CSS) Зелл Лью (@zellwk) на КодПен.

Создание стилей фокуса для WTF Forms

Стиль фокуса для форм WTF состоит из двух частей:

1. Белая рамка
2. Синяя рамка
   

Этот стиль можно создать с помощью box-shadow. Идея в том, что вы создаете две тени:

1. Первая тень с цветом фона
2. Вторая тень с цветом фокуса

*:focus {
  outline: none;
  box-shadow: 0 0 0 .075rem #fff, 
              0 0 0 .2rem #0069d4;  
}

Если вы хотите изменить цвет фокуса, вам нужно переписать весь box-shadow.

.blue-background *:focus {
  outline: none;
  box-shadow: 0 0 0 .075rem #0069d4, 
              0 0 0 .2rem #fff;  
}

Примечание. В WTF Forms нет стилей для ссылок и кнопок. Только элементы формы. У него также нет стилей для более темного фона. Я создал эту демонстрацию в соответствии с тем, что, по моему мнению, выглядит нормально.

См. перо Стиль фокуса WTF Forms Зелл Лью (@zellwk) на КодПен.

Есть более простой способ. Если вы использовали переменные CSS, вам нужно только переключить цвета.

:root {
  --focus-inner-color: #fff;
  --focus-outer-color: #0069d4;
}

*:focus {
  outline: none;
  box-shadow: 0 0 0 .075rem var(--focus-inner-color), 
              0 0 0 .2rem var(--focus-outer-color);
}

.blue-background {
  --focus-inner-color: #0069d4;
  --focus-outer-color: #fff;
}

См. перо Стиль фокуса WTF Forms (с переменными CSS) Зелл Лью (@zellwk) на КодПен.

Создание стилей фокуса для Slack

Стиль фокуса в Slack состоит из двух частей:

1. Темно-синий контур
2. Голубая рамка
   

Этот стиль фокуса можно создать с помощью той же техники, что и WTF Forms.

*:focus {
  outline: none;
  box-shadow: 0 0 0 2px hsla(210, 52%, 42%, 1.00), 
              0 0 0 .6rem hsla(200, 72%, 83%, 0.75);
}

Трюк с переменными CSS творит чудеса, если вам нужно изменить цвета.

:root {
  --focus-inner-color: hsla(210, 52%, 42%, 1.00);
  --focus-outer-color: hsla(200, 72%, 83%, 0.75);
}

*:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-inner-color), 
              0 0 0 .6rem var(--focus-outer-color);
}

.dark {
  --focus-inner-color: hsla(0, 0%, 100%, 0.75);
  --focus-outer-color: hsla(0, 0%, 100%, 0.25);
}

См. перо Стиль фокуса Slack Forms (с переменными CSS) Зелл Лью (@zellwk) на КодПен.

Если вы используете эту технику для элементов с границами, вы можете удалить границы. Неприятно видеть две границы стека.

button:focus {
  border-color: transparent;
}

См. перо Стиль фокуса Slack Forms (улучшенная граница) Зелл Лью (@zellwk) на КодПен.

Комбинированная демонстрация

Я объединил различные методы в одну демонстрацию, чтобы вы могли поиграть с ней. Вот:

См. перо Стиль фокусировки Зелл Лью (@zellwk) на КодПен.

Спасибо за чтение. Эта статья изначально была размещена на мой блог. Подписаться на моя рассылка если вы хотите больше статей, которые помогут вам стать лучшим разработчиком внешнего интерфейса.