Focus в css: &colon;focus — CSS | MDN — Вебджем.рф | Создание и продвижение сайтов

Содержание

Псевдокласс :focus | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
8.0+	1.0+	7.0+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Применяется	К элементам, которые могут получить фокус (<a>, <input>, <select> и <textarea>)
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

элемент:focus { … }

Значения

Нет.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>focus</title>
  <style>
   #enter . label {
     width: 80px; /* Ширина блока с текстом */
     float: left; /* Расположение в одну строку с полем */
     text-align: right; /* Выравнивание по правому краю */
   }
   #enter .form-text {
     width: 240px; /* Ширина поля */
     margin-left: 10px; /* Расстояние между полем и текстом */
     border: 1px solid #abadb3; /* Рамка вокруг текстового поля */
     padding: 2px; /* Поля вокруг текста */
   }
   #enter .form-item {
     margin-bottom: 5px; /* Отступ снизу */
   }
   #enter .form-text:focus {
     background: #ffe; /* Цвет фона */
     border: 1px solid #29B0D9; /* Параметры рамки */
   }
   #enter p {
    margin-left: 90px; /* Сдвиг вправо */
   }
  </style>
 </head>
 <body>
  <form action="login.php" method="post">
   <div>
     <span>Логин:</span>
     <span><input type="text" name="login" value=""></span>
   </div>
   <div>
     <span>Пароль:</span>
     <span><input type="password" name="pass"></span>
   </div>
   <p><input type="submit" value="Войти" /></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 1. При получении фокуса текстовое поле меняет цвет фона и цвет границы.

Рис. 1. Результат использования псевдокласса :focus

Браузеры

Chrome не добавляет стиль для селектора a, чтобы заставить его понимать правило a:focus, добавьте к тегу <a> атрибут tabindex.

<a href=»1.html» tabindex=»1″>Ссылка</a>

Псевдоклассы

CSS по теме

Псевдокласс :focus

Статьи по теме

Псевдоклассы

Рецепты CSS

Как сделать, чтобы текстовое поле при получении фокуса меняло цвет рамки?
Как убрать свечение вокруг текстового поля в Safari?

:focus — CSS — Дока

Кратко
Пример
Как пишется
Как понять
Подсказки
На практике
1. Алёна Батицкая советует

Кратко

Секция статьи «Кратко»

Сайтом можно пользоваться не только с использованием мышки, но и при помощи клавиатуры. При переключении клавишей Tab элементу добавляется псевдокласс :focus, и мы можем задать для него красивые стили.

Элементы формы могут получить фокус и при клике мышкой на него. Например, если кликнуть по кнопке или в поле ввода текста, то им будет добавлен псевдокласс :focus.

Важно! В браузерах Safari и Firefox на Mac при клике мышкой на кнопку фокус не устанавливается.

Пример

Секция статьи «Пример»

При попадании фокуса на кнопку будем показывать заметную белую обводку:

button:focus {  outline: 2px solid #ffffff;  outline-offset: 3px;}
          button:focus {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

Открыть демо в новой вкладке

Как пишется

Секция статьи «Как пишется»

После любого селектора ставим двоеточие и пишем ключевое слово focus.

a:focus {  outline: 2px solid hotpink;}
          a:focus {
  outline: 2px solid hotpink;
}

Как понять

Секция статьи «Как понять»

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

Важно знать, что в стандартных стилях браузера уже прописаны дефолтные стили для фокуса интерактивных элементов. Например, в Google Chrome вокруг элемента появляется прямоугольная фиолетовая рамка. Стили для неё:

:focus {  outline: -webkit-focus-ring-color auto 1px;}
          :focus {
  outline: -webkit-focus-ring-color auto 1px;
}

Важно! Не удаляйте стили для фокуса полностью. Если вам не нравятся дефолтные стили — измените их. При полном удалении фокуса пользователь не будет понимать, в какой части страницы он находится, если его сценарий пользования сайтом отличается от привычного.

Подсказки

Секция статьи «Подсказки»

💡 Смену стилей между состояниями можно анимировать при помощи transition 🎉

💡 В браузер встроены дефолтные стили для фокуса.

💡 Нельзя полностью удалять стили для фокуса, заменяйте их на свои, если дефолтные не нравятся.

💡 Стили для фокуса можно увидеть, открыв сайт и несколько раз нажав клавишу Tab. Или нажмите на кнопку, поставьте курсор в поле ввода.

На практике

Секция статьи «На практике»

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

🛠 В какой-то момент разработчики так разозлились на обводку, появляющуюся при фокусе, что начали её полностью убирать, переопределяя стандартные стили. Какое-то время это было очень распространено, но довольно быстро пришло осознание, что тем самым мы портим опыт пользования интернетом — как минимум, некоторым людям. Например, на момент написания этой статьи на сайте «Алиэкспресс» отключена обводка на интерактивных элементах. И если вы попробуете походить по сайту, используя клавиатуру, то не сможете понять, где находится ваш курсор в данный момент.

Не стоит думать, что абсолютно все, кто попадает в интернет, используют мышку для навигации. Есть люди с временно или постоянно ограниченными возможностями, которым гораздо комфортнее использовать для навигации по сайту клавиатуру. И они должны видеть, где именно в данный момент находится курсор.

Мы — разработчики — как создатели сайтов должны помнить, что пользовательские сценарии могут быть совершенно разные, и мы не в праве обделять ни одного из наших пользователей.

Если дизайнер не прорисовал в макете стили для фокуса, то вы можете оставить стандартные стили или аккуратно подобрать что-то подходящее под дизайн сайта.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

column-gap, row-gap

alt + ←

→

:checked

alt + →

CSS :focus Selector

❮ Предыдущий Справочник по селекторам CSS Далее ❯

Пример

Выбор и стиль поля ввода, когда оно получает фокус:

ввод:фокус {
фоновый цвет: желтый;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Селектор :focus используется для выбора элемента, имеющего фокус.

Совет: Селектор :focus разрешен для элементов, которые принимают события клавиатуры или другие действия пользователя.

Версия:	CSS2

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:фокус	4,0	8,0	2,0	3.1	9,6

Синтаксис CSS

:focus {
объявления css ;
} Демонстрация

Дополнительные примеры

Пример

Когда получает фокус, постепенно меняйте ширину от 100 пикселей до 250 пикселей:

input[type=text] {

ширина: 100 пикселей;
переход: плавность входа-выхода, ширина 0,35 с плавного входа-выхода;
}

input[type=text]:focus {
ширина: 250 пикселей;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: Псевдоклассы CSS

❮ Предыдущая Справочник по селекторам CSS Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.

CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник0104 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference

HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top4 Examples Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

W3Schools использует W3.CSS.

html — Как показать div в фокусе ввода с помощью CSS?

спросил 1 год, 1 месяц назад

Изменено 1 год, 1 месяц назад

Просмотрено 607 раз

Я пытаюсь показать надежность пароля, когда пользователь вводит свой пароль. Разделы индикации прочности ( .strengthClass и .rules-details ) должны отображаться только тогда, когда пользователь вводит свой пароль (т.е. когда .password-input находится в фокусе) Я попробовал приведенный ниже код CSS для тестирования с .strengthClass , но он не работает. Как я могу преодолеть это с помощью только CSS?

HTML :

 
                                
  id} value-${strengthClass.value}`} my={10}>
                                    <диапазон>
                                        {
                                            StrengthClass.value === 'Слабый' ?
                                               «Невероятно»
                                            : strongClass.value === 'Слишком слабый' ?
                                                'Невероятно'
                                            : strongClass.value === 'Средний' ?
                                                'Мойен'
                                            : strongClass.value === 'Сильный' ?
                                                'Форт'
                                            : нулевой
                                            
                                        }
                                     
                                
                                
                                    Règles du mot de passe:
                                    <ул>
                                        Доит контенир au moins 1 majuscule
                                        Контенир au moins 1 мизер
                                        Doit contenir au moins 1 chiffre
                                        Doit contenir au moins 1 special caractère
                                        Содержит 10 персонажей

CSS :

 . класс прочности{
        максимальная ширина: 200 пикселей;
        высота: 30 пикселей;
        отступ: 5px;
        размер шрифта: 13px;
        вес шрифта: 600;
        граница: 1px сплошная прозрачная;
        радиус границы: 25px;
        цвет фона: #FF68A7;
        дисплей: нет;
        
        охватывать{
            белый цвет;
            выравнивание текста: по центру;
        }
    }
.правила-подробности{
    дисплей: нет;
}
.пароль-ввод:фокус + .strengthClass{
    дисплей: блок;
}

html
css
reactjs

Я не знаю, как получается результирующая структура HTML, но чтобы использовать смежный родственный комбинатор (+) в CSS, два элемента должны быть последовательными друг за другом. Использование общего родственного комбинатора (~) позволяет обращаться к элементам, которые являются после первым элементом в любой позиции, и совместно использовать один и тот же родительский элемент.

Focus в css: :focus — CSS | MDN

Псевдокласс :focus | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Браузеры

CSS по теме

Статьи по теме

Рецепты CSS

:focus — CSS — Дока

Кратко

Пример

Как пишется

Как понять

Подсказки

На практике

Алёна Батицкая советует

CSS :focus Selector

Пример

Определение и использование

Поддержка браузера

Синтаксис CSS

Дополнительные примеры

Пример

Связанные страницы

ВЫБОР ЦВЕТА

Лучшие учебники

Top4 Examples Примеры HTML

html — Как показать div в фокусе ввода с помощью CSS?

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

Рубрики