CSS псевдокласс :focus

Псевдокласс :focus применяет стиль к элементу, который в данный момент находится в фокусе:

/* Изменить цвет текста элемента <input>, когда элемент
   получит фокус */
input:focus { color: grey; }

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

Псевдокласс :focus работает только с элементами, которые могут получить фокус. К таким элементам относятся ссылки, кнопки, элементы форм, элементы с глобальным атрибутом contenteditable или tabindex и так далее.

Пример

input:focus {
  outline: none; 
  background: #ebfaeb; 
  color: #248f24
}

button {
  width: 120px; 
  padding: 5px; 
  font-size: 1.3em;
  background: #b366ff;
  color: white;  
  border: 2px solid white; 
}
button:focus { outline: 3px solid #b366ff; }

<p><input value="Поле для ввода текста" /></p>

<p><button>Кнопка!</button></p>