Меню

Как изменить цвет focus



Изменить цвет «stroke» SVG при input:focus

Как поменять цвет SVG при фокусе инпута. как в примере CSS — не работает. Если убираем .search-form input:hover + , и оставляем только #svg-search path <
stroke: pink;
> — то цвет меняется, но естественно и без фокусировки на инпуте.

Реализовать нужно без JS

Как изменить цвет и размер шрифта input type=»radio»
OPTION 1 .

Возможно ли изменить цвет кружочка внутри input type=»radio»?
Нужно изменить цвет кружочка внутри input type=»radio»? Кто с подобным сталкивался? Плз помогите

Bootstrap 4 + input-group + focus «Окрашивание бордюр двух элементов по фокусу на один из них»
Хелп товарищи! Собственно нужно окрасить бордюры двух элементов в зеленый при фокусе на элементе.

Изменить картинку для при :hover
Здравствуйте. Столкнулся с такой проблемой: не получается изменить картинку элементу 2

Решение

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Изменить цвет «border» поля ввода при активации
приветствую знатоков! :senor: подскажите пожалуйста, как изменить цвет border-а в поле ввода при.

Как изменить свойства выпадающего списка и как убрать надпись: «Файл не выбран» в теге ?
Как изменить свойства выпадающего списка Lorem ipsum ? Как.

Как поместить svg картинку в input которая будет менять цвет когда input получает фокус?
Хочу сверстать форму отправки сообщения (изображение прикрепил). Но не получается сделать так.

Input type=»datetime» — как выводить календарь при клике на любой участок поля «datetime»
В данный момент календарь раскрывается только при клике на стрелку вниз. Надо выводить его при.

Как изменить размер Dropdown-list-а под Input[type=»text»]
Доброго времени суток всем читающим. Столкнулся с такой штукой и не знаю, что делать. Есть форма.


Если в HTML коде есть токой фрагмент , что можно.

Источник

Практическое руководство. Изменение цвета элемента с помощью событий фокуса How to: Change the Color of an Element Using Focus Events

В этом примере показано, как изменить цвет элемента при получении и потере фокуса с помощью GotFocus LostFocus событий и. This example shows how to change the color of an element when it gains and loses focus by using the GotFocus and LostFocus events.

Этот пример состоит из Язык XAML Extensible Application Markup Language (XAML) файла и файла кода программной части. This example consists of a Язык XAML Extensible Application Markup Language (XAML) file and a code-behind file.

Пример Example

Следующий код XAML создает пользовательский интерфейс, состоящий из двух Button объектов, и присоединяет обработчики событий для GotFocus событий и LostFocus к Button объектам. The following XAML creates the user interface, which consists of two Button objects, and attaches event handlers for the GotFocus and LostFocus events to the Button objects.

Следующий программный код создает GotFocus LostFocus обработчики событий и. The following code behind creates the GotFocus and LostFocus event handlers. Когда Button фокус клавиатуры получает значение, значение параметра Background Button изменяется на красный. When the Button gains keyboard focus, the Background of the Button is changed to red. Когда Button теряется фокус клавиатуры, значение Background объекта Button меняется обратно на белый. When the Button loses keyboard focus, the Background of the Button is changed back to white.

Источник

Блог Vaden Pro

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

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

Как уже упоминалось не единожды, граница для текстового поля устанавливается посредством свойства CSS border. Следовательно, работа нашего приема будет опираться на возможности этого свойства. За текстовое поле отвечает тег input. Теперь обратимся к сущности понятия фокуса. Его объект получает в том случае, если пользователь кликнул по нему мышью или активизировал каким-либо другим способом. В случае текстового элемента это будет означать перевод курсора к соответствующему полю, что позволяет вводить информацию в него.

Теперь осталось только связать работу свойства border с явлением присвоения фокуса. Это осуществляется с помощью псевдокласса :focus. Его достаточно присвоить соответствующему классу или объектам input или textarea.

Пример кода данного приема приведен ниже:

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

В результате в браузере получаем:

Следует сделать акцент на том, что всеми любимый Internet Explorer на ранних этапов своего становления не поддерживает рассматриваемый в статье псевдокласс. Для разрешения этой проблемы обратимся к скрипту. В этом случае нам помогут события onfocus (присваивающее фокус) и onblur (избавляющее от него). Смотрим пример применения:

Результат в браузере будет идентичен прошлому случаю.

Источник

Оформляйте стили наведения, фокуса и активного состояния по-разному


В течение многих лет я оформлял состояния элементов :hover , :focus и :active одинаково. Не помню точно, когда именно начал это делать. Но это далеко не лучший подход. Почему, постараюсь объяснить в этой статье.

Вот пример кода, который всегда использовал.

Когда я стал уделять больше внимания доступности интерфейса при работе с клавиатуры (состоянию фокуса в частности), пришел к выводу, что мы не должны одинаково стилизовать разные состояния элементов.

Наведение, фокус и активное состояние должны стилизоваться по-разному.

Причина проста: Это разные состояния!

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

Читайте также:  Коррекция черного цвета бровей татуаж 1

Давайте начнём с :hover .

Стилизация наведения (:hover)

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

Обычно это состояние заключается в изменении цвета фона background-color и/или текста color . Различия не обязательно должны быть очевидными, потому что пользователи и так знают, что навели курсор на какой-то элемент.

Стилизация фокуса (:focus)

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

  1. при выборе элемента кнопкой «Tab»
  2. при щелчке на элемент мышью

К фокусным элементам относятся:

и т.д)

  • Элементы с атрибутом tabindex
  • Следует помнить о некоторых важных моментах:

    Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.

    В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:

    1. Добавление обводки (outline)
    2. Создание анимаций
    3. Изменение background-color
    4. Изменение color

    Поскольку изменение свойств background-color и color часто производится при :hover , имеет смысл состояние :focus оформлять с помощью обводки или анимации.

    Вы можете использовать комбинации свойств outline , border и box-shadow для создания интересных стилей фокуса. Как это можно сделать, я описал в статье «Creating a custom focus style».

    Стилизация активного состояния (:active)

    При взаимодействии с чем-то в реальной жизни, вы ожидаете своего рода отклик. Например, при надавливании на кнопку, вы ожидаете, что она нажмётся.

    На веб-сайтах этот отклик также полезен. Можно стилизовать момент «нажатия кнопки» с помощью :active . Вызывается это состояние, когда вы взаимодействуете с элементом. Под взаимодействием в данном случае подразумевается:

    1. Удержание левой кнопки мыши на элементе (даже когда он не в фокусе)
    2. Удержание кнопки пробела (на кнопках)

    Две особенности, которые следует принять к сведению:

    1. Удержание пробела вызывает состояние :active у кнопок ( ), но при удержании Enter этого не происходит
    2. Enter запускает ссылки но не вызывает активное состояние. Пробел не запускает ссылки вообще

    Стили ссылок по умолчанию

    Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными

    Взаимосвязь между :active и :focus

    При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.

    Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.

    Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.

    1. При удержании левой кнопки мыши в Firefox и Chrome вызываются состояния :active и :focus . В Safari – только состояние :active (проверено только на Mac OS)
    2. Если отпустить кнопку мыши, :focus остаётся на ссылке (если атрибут href не ссылается на id на этой же странице). В Safari фокус возвращается на

    Для кнопок:

    1. Когда вы удерживаете левую кнопку мыши: оба состояния :active и :focus вызываются только в Chrome. Состояние :focus совсем не вызывается в Safari и Firefox (Mac). Я написал про это странное поведение здесь.

    Если нужно, чтобы клики вызывали фокус для кнопок, нужно как можно раньше добавить этот JavaScript (для чего это нужно, можно прочитать в статье, ссылку на которую я указал выше).

    Добавление этого кода изменит поведение нажатия кнопок на следующее:

    1. При удержании кнопки мыши, :active вызывается во всех браузерах, :focus только в Chrome
    2. Если отпустить кнопку мыши, вызывается :focus в Safari и Firefox (Mac OS). :focus остаётся на кнопке во всех браузерах


    Поведение кнопок в Safari после добавления фрагмента JS-кода

    Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх

    Волшебная комбинация

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

    Для пользователей мыши:

    1. Когда пользователь наводит на элемент, меняется background-color (и/или color ). Происходит отклик.
    2. Когда пользователь кликает на элемент, показывается обводка фокуса. Происходит отклик.

    Для пользователей клавиатуры:

    1. Когда пользователь выбирает элемент кнопкой Tab, показывается обводка фокуса. Происходит отклик.
    2. Когда они взаимодействуют с элементом, меняется background-color (и/или color ). Происходит отклик.

    Лучшее из обоих миров!

    1. Я не проверял тщательно магическую комбинацию.Это лишь аргумент в пользу этой концепции концепции. Буду признателен, если вы поможете мне проверить её и дадите знать о возможных проблемах.
    2. Если будете проверять, не используйте Codepen. Состояние фокуса для ссылок в Codepen ведёт себя очень странно. Если навести курсор на ссылку, обводка фокуса удалится. Почему? Я не знаю. Порой мне кажется, что лучше всего проверять подобные вещи без использования дополнительных инструментов. Просто старые добрые HTML, CSS, JS.

    Не волшебная (но может даже лучше) комбинация

    Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.

    Вот что произойдёт в Safari и Firefox на Mac OS:

    1. Когда пользователь держит кнопку мыши нажатой, ничего не меняется
    2. Когда пользователи отпускают кнопку, элемент получает фокус

    Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.

    Но если вы считаете такое поведение недостаточно доступным, может возникнуть желание стилизовать состояния :hover , :focus и :active по отдельности.


    Поведение кнопки в Safari, если были стилизованы все три состояния

    Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.

    Читайте также:  Если пепельным цветом краски покрасить белые волосы что будет

    Источник

    Фокусы со стилями для фокуса

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

    Люди сложно устроены. Мы не всегда последовательны, а наши решения не всегда выглядят логичными. Порой мы даже делаем что-то просто так. Нам легко надоедает возиться и ковыряться с вещами, чтобы они лучше соответствовали нашим потребностям, независимо от их первоначального предназначения.

    Люди также смертны. Мы можем заболеть или пораниться, случаются и обе беды сразу. Иногда это на время, а иногда — на всю жизнь. Как бы то ни было, порой привычные способы добиться нужного или желаемого бывают нам недоступны.

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

    Как мышь, так и сенсорный ввод служат индикатором для взаимодействия. Для сенсора это ясно: палец — связующее звено между вашим разумом и предметом на экране, который ему нужно активировать. В случае мыши, курсор служит посредником для вашего пальца.

    Однако, есть ещё множество других форм ввода. Клавиатуры есть повсюду и могут практически полностью заменить мышь или сенсорный ввод, если знать нужные клавиши для нажатия в правильном порядке. Иногда это проще и быстрее мыши!

    Вспомните, когда вы в последний раз использовали функциональность «Вырезать», «Копировать», «Вставить» и «Сохранить». Возможно, во время работы с таблицей, например, с Excel? Вы переключались между мышкой и клавиатурой, чтобы работать эффективнее? Вероятно, вы делали это «на автомате», но это яркий пример переключения ввода на лету ради быстрого результата. Да чёрт возьми, может во время этого нудного занятия у вас ещё нашлось время, чтобы лайкнуть чью-либо запись в Facebook на смартфоне.

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

    На этом видео, редактор видеороликов и консультант по доступности Кристофер Хилс демонстрирует возможности «Switch Control», программного обеспечения, помогающего людям с нарушением двигательной функции использовать аппаратные переключатели для работы со своими вычислительными устройствами.

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

    Если это интерактивно, этому нужен стиль фокуса

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

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

    Главное, дать эту возможность всем независимо ни от чего.

    Идентификация и активация

    :focus

    Как с помощью этих альтернативных форм ввода можно определить, что это подходит для активации? К счастью, в CSS это решено — мы используем селекторы :focus и :active .

    Они довольно просты. Хотите обвести ссылку оранжевым, когда пользователь переведет на неё фокус? Вот как это описать:

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

    Есть популярное заблуждение, будто к стилям фокуса можно применить только свойство outline Отмечу, что :focus — это такой же селектор, как и любой другой, а значит, он принимает любые CSS-свойства. Я люблю играть с фоновым цветом, подчёркиванием и другими приемами, не влияющими на текущий размер компонента, чтобы не сдвигать раскладку страницы при активации селектора.

    Затем, скажем, нужно удалить подчёркивание активированной ссылки, чтобы сообщить о смене состояния. Помните: ссылки используют подчёркивание!

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

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

    Читайте также:  Роза какие еще цвета есть

    Чтобы лучше проиллюстрировать проблему, я намеренно удалил подчёркивание и браузерную нативную обводку фокуса из ссылки на видео. Если перебирать всё интерактивное на странице клавишей Tab, эту ссылку можно сразу и не заметить. Если человек не различает цвета, он не увидит и изменения ее состояния при наведении, а если у него к тому же катаракта — то и подавно.

    :focus-within

    :focus-within — связанный с фокусом селектор псевдокласса, название которого, «фокус внутри», звучит очень по-дзенски — может применять стили к родительскому элементу, когда один из его дочерних элементов получает фокус.

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

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

    Взгляды

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

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

    :focus-visible

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

    Псевдокласс :focus-visible срабатывает, когда браузер определил, что произошло событие фокуса, и специальные встроенные эвристики подсказали ему, что имел место ввод без указателя. Или, если не такими мудрёными словами — он показывает стили для фокуса, если элемент активирован не курсором мыши и не пальцем на сенсоре.

    На видеозаписи этого примера с Codepen видно, как в зависимости от того, каким способом пользователь выбирает ссылку, к ней применяются разные стили. При наведении и клике по ссылке мышью удаляется её подчёркивание, а сама она немного сдвигается вниз. При переходе к ней клавишей Tab с клавиатуры :focus-visible вместо этого применяет к ссылке яркий цвет фона.

    Недавно Chromium заявил о своём намерении реализовать :focus-visible . Несмотря на сегодняшнюю скудную поддержку браузерами, есть полифил. Вместе с :focus-within они находятся в редакторском черновике селекторов четвёртого уровня, и со временем их начнут поддерживать все основные браузеры.

    Вы можете знать :focus-visible под другим названием :-moz-focusring . Так, в виде псевдоселектора с префиксом, эту же идею реализовала Mozilla, еще за семь лет до предложения :focus-visible . В отличие от других браузерных префиксов CSS, нам не придётся беспокоиться о поддержке авторасстановки префиксов! Firefox признает как объявление :focus-visible , так и :moz-focusring , гарантируя, что между двумя браузерами будет паритет для наших названий селекторов.

    Шаг вперёд, шаг назад

    С браузерной поддержкой не всё гладко — одними лишь Chrome и Firefox веб не ограничивается. Пусть полифил отлично справляется там, где нет нативной поддержки, мы всё равно загружаем лишние данные, получаем дополнительную сложность в поддержке и более хрупкий код.

    Также стоит отметить, что теперь нет такого четкого противопоставления двух классов устройств по типу ввода, как было раньше. Флагманский компьютер Surface от Microsoft предлагает клавиатуру, трекпад, стилус, камеру, голос и сенсорную функциональность из коробки. Исследование использования скринридеров WebAIM в 2017 г. показало, что мобильные устройства могут дополняться клавиатурным вводом чаще чем вы думаете. Эвристика — это хорошо, но как и аналитика, она не даёт полной картины.

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

    Залог надёжного и устойчивого веба — это крепкая базовая функциональность, работающая в любом браузере. У ванильного селектора :focus настолько широкая поддержка, что можно быть уверенным, что даже экзотические браузеры его поймут.

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

    Если есть желание продвинуться в этой теме ещё дальше, дизайнер интерфейсов Кэйтлин Джийер отлично написала про индикаторы фокуса.

    P.S. Это тоже может быть интересно:

    Если вам понравилась статья, поделитесь ей!

    Источник