Search the Community

Сейчас, когда на дворе почти 2015 год, стало модно делать всякие эффекты без использования JS. Обычно для переключения состояний элемента используются следующие псевдоклассы: :focus :checked :active Вот про первый я и хочу написать небольшую заметку. Знаете ли вы, что в HTML можно сделать любой элемент способным получать фокус? Для этого достаточно просто добавить атрибут tabindex к любому тегу. Есть правда один нюанс - tabindex отвечает за то, в каком порядке пользователь будет переключаться между полями формы (используя клавишу Tab). По умолчанию индексы расставляются браузером автоматически по мере появления контрола в коде, но мы можем изменить порядок переключения задав tabindex, значения которого начинаются с нуля. Так вот, если мы просто зададим табиндекс нашему кастомному элементу - это может нарушить логику работы с формой. Однако есть небольшая хитрость: мы можем задать отрицательное значение, в таком случае браузер будет просто игнорировать клавишу Tab, но при клике на такой элемент он всё равно получит фокус. Вот собственно и всё! В заключении небольшой примерчик.