:focus
Срабатывает у элемента, на котором сейчас фокус: поле, в которое вводят текст, кнопка, выбранная клавишей Tab.
Синтаксис
selector:focus { … }Примеры
У активного поля синяя рамка:
<style>
input { padding: 6px; border: 2px solid lightgray; outline: none; }
input:focus { border-color: royalblue; }
</style>
<input placeholder="Click here">
<input placeholder="Or here">Примечания
Никогда не убирайте контур фокуса без замены — пользователь клавиатуры перестанет видеть, где он находится. Для кнопок и ссылок обычно лучше :focus-visible: он не показывает контур после щелчка мышью. Чтобы оформить родителя, внутри которого есть фокус, используйте :focus-within.
См. также
- :focus-visible — Срабатывает у элемента в фокусе, когда браузер считает, что фокус нужно показать, — обычно после перехода с клавиатуры.
- outline — Обводка вокруг элемента, которая не занимает места и не сдвигает соседей.
- :hover — Срабатывает, пока над элементом находится указатель мыши.
Вопросы и ответы по теме
В учебнике
- Псевдоклассы — Стили для состояний и положения элементов — hover, focus, ссылки, first-child, nth-child, not и поля форм.