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


Содержание

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

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

Пожалуйста, просмотрите код на fiddle.

Есть вход: focus, поскольку есть текстовое поле: focus

Вероятно, более подходящим способом изменения цвета контура является использование правила CSS outline-color .

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

Вы можете создать общий класс CSS, чтобы использовать весь проект для ввода всех элементов: focus и textarea: focus или также вы можете добавить.

Посмотрите другие вопросы по меткам html css или Задайте вопрос

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

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

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Пример

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

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

Примечание

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

Спецификация ?

Спецификация Статус
Selectors Level 4 Рабочий проект
Selectors Level 3 Рекомендация
CSS Level 2 (Revision 1) Рекомендация

Спецификация


Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

8 12 1 7 1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Как изменить цвет замещающего текста поля формы

Из этого туториала Вы узнаете, как изменить цвет замещающего текста ( placeholder text color) поля формы.

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

По умолчанию, замещающий текст светло-серый (таким его отображают браузеры). Для того чтобы добавить к этому тексту пользовательские стили, Вам нужно будет использовать браузерные префиксы для свойств CSS.

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

Составьте код в соответствии со следующей информацией (обратите внимание, что Вам необходимо добавить один и тот же код 4 раза для каждого браузерного префикса):

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

Следующий код изменит цвет замещающего текста для текстовой области (text area) (где, как правило, вводится основное сообщение контактной формы):

Следующий код изменит цвет замещающего текста для отдельного типа ввода, в нашем случае — адрес электронной почты (email):

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


Шаблоны CMS:
  • Темы WordPress (Темы WooCommerce/Jigoshop) /wp-content/themes/themeXXXXX/style.css
  • Шаблоны Joomla (Шаблоны VirtueMart) /templates/themeXXXX/css/template.css
  • Темы Drupal /sites/all/themes/themeXXX/css/style.css
  • Шаблоны Web (HTML5) /css/style.css
Шаблоны E-commerce:
  • Темы Magento /skin/ frontend /default/themeXXX/css/styles.css
  • Темы PrestaShop /themes/themeXXXX/css/global.css
  • Темы OpenCart /catalog/view/theme/themeXXX/ stylesheet / stylesheet .css
  • Темы ZenCart /includes/templates/themeXXX/css/ stylesheet .css
  • Шаблоны osCommerce /css/ stylesheet .css
  • Шаблоны Shopify style.css.liquid
  • Сохраните изменения и загрузите файлы CSS на ваш сервер.

    Вы можете также ознакомиться с детальным туториалом ниже:


    Доступные индикаторы фокуса в CSS: Кое-что, что следует принимать во внимание

    Дата публикации: 2020-06-11

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

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

    Почему фокус имеет значение?

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

    Для пользователя со слабым зрением или слепого внешний вид вашего приложения может не иметь значения, поскольку они, вероятно, будут использовать определенные вспомогательные технологии (AT), такие как устройство чтения с экрана, чтобы помочь им перемещаться в приложении. Тем не менее, для пользователей, которые могут видеть экран, внешний вид имеет значение. Это шаблон, как и любой другой элемент, который вы разрабатываете, и он должен быть согласованным. Ваш фокус показывает пользователю, что является «кликабельным», и это помогает определить, что это за элемент.

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

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Фокус по умолчанию

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

    Давайте рассмотрим фокус по умолчанию для нашей библиотеки шаблонов:

    DataExpress

    Конструктор баз данных

    • Темы пользователя
      • >в конференции
      • >>в форуме

    • Сообщения пользователя
      • >в конференции
      • >>в форуме
      • >>>в теме

    Выделение текста в поле при получении фокуса

    Выделение текста в поле при получении фокуса

    Сообщение Darkest_One » Пт мар 23, 2020 1:14 pm

    Re: Выделение текста в поле при получении фокуса

    Сообщение jurist23rus » Пт мар 23, 2020 1:34 pm

    Re: Выделение текста в поле при получении фокуса

    Сообщение Darkest_One » Пт мар 23, 2020 1:53 pm

    Хороший вопрос, но с моими знаниями отвечать на него явно не мне

    По скрипту (поправьте, если где-то ошибся):
    Мне нужно сделать скрипт формы, в нём прописать проверку на фокус для типа поля (для примера dxCalcEdit) и при фокусе =1 вызвать процедуру SelectAll, правильно?

    Re: Выделение текста в поле при получении фокуса

    Сообщение jurist23rus » Пт мар 23, 2020 2:02 pm

    Re: Выделение текста в поле при получении фокуса

    Сообщение Darkest_One » Пт мар 23, 2020 3:17 pm

    procedure Select3(Sender: TObject);
    begin
    dxCalcEdit3.SelectAll;
    end;

    procedure Form_Create;
    begin
    dxCalcEdit3.OnClick := @ Select3;
    end;

    Re: Выделение текста в поле при получении фокуса

    Сообщение jurist23rus » Пт мар 23, 2020 3:49 pm


    Я думаю это связано с логикой компонентов lcl. OnEnter обрабатывается раньше чем OnClick. Вы выделяете в обработчике OnEnter текст, но за ним сразу же следует снятие выделения, как это и задумано при клике по полю (ведь при клике выделение всегда снимается — это штатная логика компонентов). Поэтому выделяете вы, а убирает выделение lcl и вы его не увидите.

    Выделяйте в обработчике OnClick

    Re: Выделение текста в поле при получении фокуса

    Сообщение Darkest_One » Пн мар 26, 2020 9:28 am

    Жаль, конечно, ну да ладно, по клику тоже пойдёт.

    Более унифицированный вариант, если кому-то тоже нужно будет:

    procedure EditSelectAll(Sender: TObject);
    begin
    TdxCalcEdit(Sender).SelectAll;
    end;

    procedure Form_Create;
    begin
    dxCalcEdit1.OnClick := @ EditSelectAll;
    dxCalcEdit2.OnClick := @ EditSelectAll; //и далее все поля,которые нужны.
    end;

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

    Иногда какая-нибудь мелочь способна испортить всю стилистику дизайна. Так смотришь, вроде бы textarea и input поля выглядят нормально, но как только кликаешь на них — появляется какая-то синяя рамка. Я вообще работаю сразу в нескольких браузерах для создания частичной кроссбраузерности. Об идеальной кроссбраузерности, конечно, речи не идет, но все же когда тестируешь сразу линейку современных браузеров — на душе как-то спокойнее. Так вот, такая штука с рамкой при клике была замечена именно в Chrome, хотя по поиску заметил, что такое еще бывает и в Safari браузере.

    Ну что ж, это небольшая проблема верстки и её нужно решить. А сделать это очень просто, достаточно прописать в CSS стиле вот это:

    И сразу же все поля textarea и input перестанут обводиться в эту пресловутую синюю рамку.

    Вот и все — нарушающая дизайн рамка удалена. Всем правильной верстки и внимания к деталям! =)

    Как сделать фокус на форме ввода при загрузке страницы

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

    Через CSS поставить курсор в поле ввода сразу после загрузки страницы очень легко. Достаточно прописать к тегам input атрибут autofocus. Вот пример кода:

    Теперь о минусах этого способа. В браузере Internet Explorer не работает вообще. В остальных популярных, но последних версий работает/ Дело в том, что этот атрибут из спецификации HTML5, а ее пока не все браузеры поддерживают. Но в последнее время появляется все больше и больше сайтов, разработанных на HTML5 и CSS3 и их владельцев не волнует, что некоторые браузеры не успевают за технологическим прогрессом. Так что использовать данный метод можно, это не критично.

    Во втором способе будем использовать JavaScript и этот способ тоже не сложный. Для начала к тегу body нужно прописать необходимое событие, наглядно это будет так:

    Форум


    Справочник

    Поиск по форуму
    Расширенный поиск
    К странице.
    Страница 1 из 2 1 2 >

    Сделал проверку введенного числа на Float. Проверка выполняется при потере фокуса. Но я не могу фокус вернуть на место. Вот функции:

    Если проверка даже и показывает, что введено не число, то фокус все равно теряется. что делать?

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

    А в-третьих, эти ваши сраные jQuery мало чем могут помочь с фокусом. Поставь вместо это:

    Есть такой плагин http://www.jankoatwarpspeed.com/post. uery-CSS3.aspx на jQuery, но у него есть один недостаток, который хочется устранить.
    Если выделяю какой-то текст с целью скопировать или отредактировать, то всплывающая панель с инструментами не нужна. Я сделал кнопку, которая ее закрывает, но при этом теряется выделение текста.

    Подскажите, пожалуйста, как можно закрыть панельку выделив заново текст между before и after?

    Изменение стиля текстового поля при фокусе

    Я часто пользуюсь браузером Google Chrome и мне нравится, как в нем реализовано взаимодействие пользователя с HTML-формами. Объясню более подробно, при фокусе в каком-либо поле, границы поля меняют цвет на более заметный. На мой взгляд, это очень удобно, при заполнении форм. Особенно когда человек сильно устал или плохо видит. Для реализации подобного эффекта мы будем использовать jQuery.

    Для начала создадим простую форму, с несколькими текстовыми полями.

    Теперь добавим стиль для текстовых полей. Фон будет выделяться #ffeeac, а граница #aa88ff.

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

    Посмотреть получившийся результат можно, на приведенном ниже примере.
    Demo

    Как изменить цвет замещающего текста поля формы

    Из этого туториала Вы узнаете, как изменить цвет замещающего текста ( placeholder text color) поля формы.

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

    По умолчанию, замещающий текст светло-серый (таким его отображают браузеры). Для того чтобы добавить к этому тексту пользовательские стили, Вам нужно будет использовать браузерные префиксы для свойств CSS.

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

    Составьте код в соответствии со следующей информацией (обратите внимание, что Вам необходимо добавить один и тот же код 4 раза для каждого браузерного префикса):

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

    Следующий код изменит цвет замещающего текста для текстовой области (text area) (где, как правило, вводится основное сообщение контактной формы):

    Следующий код изменит цвет замещающего текста для отдельного типа ввода, в нашем случае — адрес электронной почты (email):

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

    Шаблоны CMS:
    • Темы WordPress (Темы WooCommerce/Jigoshop) /wp-content/themes/themeXXXXX/style.css
    • Шаблоны Joomla (Шаблоны VirtueMart) /templates/themeXXXX/css/template.css
    • Темы Drupal /sites/all/themes/themeXXX/css/style.css
    • Шаблоны Web (HTML5) /css/style.css
    Шаблоны E-commerce:
    • Темы Magento /skin/ frontend /default/themeXXX/css/styles.css
    • Темы PrestaShop /themes/themeXXXX/css/global.css
    • Темы OpenCart /catalog/view/theme/themeXXX/ stylesheet / stylesheet .css
    • Темы ZenCart /includes/templates/themeXXX/css/ stylesheet .css
    • Шаблоны osCommerce /css/ stylesheet .css
    • Шаблоны Shopify style.css.liquid
  • Сохраните изменения и загрузите файлы CSS на ваш сервер.

    Вы можете также ознакомиться с детальным туториалом ниже:

    Илон Маск рекомендует:  Что такое код mb_encode_mimeheader
  • Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL