Цвет замещающего текста


Содержание

INPUT — Изменение цвета текста/фона, Placeholder & AutoComplete

02.12.2020, 16:22

Рабочий способ изменения цвета поля ввода Input, Placeholder & Auto-Complete
Буду краток. И так.. в первом шаблоне находятся стандартные CSS настройки поля ввода input.

Динамическое изменение цвета фона ячеек
Здравствуйте. Собственно озадачился недавно созданием сайта но в html полный нуб. Код пишу при.

Изменение фона и цвета ссылки, по которой кликнули
Здравствуйте! Подскажите пожалуйста, почему не меняется цвет и фон ссылки, у которой .

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

Изменение цвета фона одного объекта при наведении на другой
Доброго времени суток. Столкнулся с проблемой которую никак не получается решить. Создал навигацию.

Как изменить цвет замещающего текста поля формы. Добавляем CSS стиль для placeholder

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

Где находится плейсхолдер?

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

Стилизация placeholder на CSS выглядит так:

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

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

  • ::-webkit-input-placeholder — для webkit-браузеров (Safari, Chrome, Opera);
  • ::-moz-placeholder — для браузеров Firefox выше 19 версии;
  • :-moz-placeholder — для старых Firefox;
  • :-ms-input-placeholder — для Internet Explorer выше 10 версии.

Как видно, старые браузеры Mozilla, а также IE считают placeholder CSS-псевдоклассом, а не псевдоэлементом. Не будем с ними спорить, просто учтем этот аспект при стилизации поля ввода.

Возможности стилизации

Для псевдоэлемента placeholder в CSS можно установить следующие параметры:

  • фон — группа блока подсказки распространяется на все поле ввода. Можно задать не только цвет (background-color), но и изображение (background-image).
  • цвет текста — color;
  • прозрачность — opacity;
  • подчеркивание, надчеркивание или зачеркивание — text-decoration;
  • регистр — text-transform;
  • внутренние отступы — padding. Поддерживается не всеми браузерами. Как для строчных элементов, верхний и нижний отступы игнорируются.
  • отображение шрифта — свойства группы font, line-height и разнообразные отступы (text-indent, letter-spacing, word-spacing);
  • вертикальное выравнивание в строке — vertical-align;
  • обрезка текста при переполнении контейнера — text-overflow.

.input1::placeholder < background-image: linear-gradient(lime, blue); color: white; >.input2::placeholder < text-decoration: line-through; color: purple; font-weight: bold; >.input3::placeholder < font-size: 16px; letter-spacing: 10px; >.input4::placeholder

В фокусе

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

В некоторых браузерах допустимо анимировать изменение ряда свойств плейсхолдера с помощью инструкции transition.

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

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

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

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

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

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

Выберите файл, в который Вы добавите код. Вы можете добавить его в любой файл 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 на ваш сервер.

    Привет, сегодня использованием placeholder у input уже никого не удивишь. Placeholder — это такой временный текст с примером внутри input, который исчезает при вводе текста. CSS стиль для placeholder, мы и постараемся сегодня прописать.

    Задача: сделать свой css стиль для placeholder

    Допустим у нас есть стильный сайт, в котором в input используется placeholder. Нам нужно сделать так, чтобы серый муторный стиль текста placeholder’a выглядел в общем стиле сайта. Как же этого достичь? Сразу скажу, что это работает пока не во всех браузерах. Конкретно в IE версии 9 и ниже не работает вообще, в 10 и далее пока работает с большими трудностями. Другое дело Firefox и webkit-браузеры.

    Решение: css стиль для placeholder


    Итак, задачу мы поставили, как же будем её решать?

    Сначала сделаем полигон для тестирования:

    Готово, теперь посмотрим, что можно сделать со стилем: у webkit и mozilla есть собственные модификаторы, которые позволяют назначать особенный стиль для placeholder: ::-webkit-input-placeholder и:-moz-placeholder. Посмотрим как их использовать:

    Опишем стиль самого input и текст в нем (синий цвет для контраста в примере):

    Теперь пропишем специальный стиль для текста placeholder в этом input для Webkit браузеров (Chrome, Safari, Opera):

    Сделаем текст плейсхолдера красным жирным курсивом. Обратите внимание, в отличие от других псевдо-классов CSS, которые отделяются одинарным двоеточием, стиль для placeholder в webkit отделяется двойным двоеточием.

    Теперь пропишем точно такой же стиль для Mozilla Firefox браузеров:

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

    Надеюсь, эта статья поможет вам сделать ваш сайт более удобным для пользователей.

    Псевдоэлемент::placeholder color ( в некоторых случаях псевдокласс ) позволяет задать текстовое наполнение элемента формы. Он устанавливается при помощи атрибута placeholder : .

    Этот текст можно стилизовать для большинства современных браузеров с помощью специальных префиксов:

    Предупреждение: это нестандартный синтаксис, с этим связаны и странные названия. :placeholder-shown – это стандарт, и даже авторы спецификации, вероятно, думают, что ::placeholder стандартизирован.

    Как и в случае с любым псевдоэлементом, его вы можно применять к определенным элементам следующим образом:

    Разница между:placeholder-shown и::placeholder

    :placeholder-shown предназначен для выделения формы ввода, а CSS placeholder color отвечает за стилизацию текста.

    Взгляните на диаграмму:

    Оказалось, что многих это сбивает с толку, и я часто вижу спецификацию, где есть :placeholder-shown , но отсутствует ::placeholder .

    Нужно отметить, что :placeholder-shown может влиять на стилизацию текста, так как является для него родительским элементом ( например, можно изменять font-size ).

    Обратите внимание: :placeholder-shown – псевдокласс ( элемент в конкретном состоянии ), а ::placeholder – это псевдоэлемент ( видимая часть, которая находится не в DOM ). Отличаются они одинарными и дойными кавычками.

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

    Элемент или класс?

    В этом плане input placeholder color не стандартизирован. Это значит, что у каждого браузера своё понимание того, как это должно работать.

    Изначально этот псевдокласс был внедрён в браузер Firefox . Этот псевдокласс даёт не так уж много пространства для манёвра. Например, если нужно изменить цвет текста при выделении формы ввода, потребуется использовать селектор типа input:focus::placeholder . А псевдокласс не позволяет этого сделать.

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

    Цвет заглушки в Firefox

    Вы заметили, что цвет заглушек выглядит более тусклым по сравнению с другими браузерами. На картинке, приведенной ниже, слева показан Firefox 43 , а справа — Chrome 47 :

    Так происходит потому, что по умолчанию все «заглушки » в Firefox получают дополнительное значение прозрачности. Чтобы избавиться от этого эффекта, нам понадобится следующая строка кода:

    Попробуйте открыть это демо в браузере Firefox .

    Поддержка стилей

    Псевдоэлемент поддерживает следующие свойства:

    • font properties ;
    • color ;
    • background properties ;
    • word-spacing ;
    • letter-spacing ;
    • text-decoration ;
    • vertical-align ;
    • text-transform ;
    • line-height ;
    • text-indent ;
    • opacity ;

    Дополнительные ресурсы

    Документация MDN
    Документация IE
    Развёрнутая статья на блоге Treehouse

    Использование фонового изображения для замены текста

    С помощью простого трюка CSS вы можете улучшить представление шрифтов на своих веб-страницах. При этом и неграфические броузеры и поисковые роботы смогут с ними нормально работать.

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

    Введение

    Вы мечтаете получить типографское качество заголовков и декоративных шрифтов с помощью изображений вместо «голого» HTML? При всех тех богатых возможностях форматирования текста, имеющихся в CSS, иногда трудно удержаться от желания открыть Adobe Photoshop и набрать там текст любимым шрифтом, задав при этом нужный размер, кернинг и трекинг. Вам ведь известно, что если вставить такое изображение в веб-страницу, то любой пользователь Сети, броузер которого способен показывать графику, увидит ваш шрифтовой шедевр так, как вы и задумывали. Верно?

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

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

    Давайте-ка отложим на время всю эту информацию в сторонку. Так ли уж плохи изображения на самом деле? С помощью небольших трюков CSS, чуть более осторожном планировании и тестировании, можно получить красивые шрифты на веб-страницах, и при этом страница останется доступной для всех (см. заметку ниже), даже для индексирующих роботов. Время снова расправить крылья!

    Основная идея

    Основная идея очень проста: мы напишем небольшую строчку текста (например «Hello world!») и поместим её внутрь двух наборов HTML-тегов. Затем с помощью CSS мы спрячем этот текст, а вместо него покажем фоновое изображение, которое будет содержать те же самые слова. Вот и всё. Заменить текст изображением не так сложно, как кажется.

    Прежде чем браться за CSS, давайте создадим простой код HTML-разметки. Представьте, что у нас имеется что-то вроде этого:

    Само собой, мы могли бы просто оформить сам текст с помощью стилей. Но нам-то нужно что-то более искусное, чем детская игра со значениями для свойств font-family или text-transform. Мы ведь хотим пышности! Раз уж мы говорим «Привет!» миру, то нужно делать это щёгольски, верно?

    Выберем для нашего приветствия миру самый подходящий шрифт, скажем, Shelley Allegro. Мы считаем, что хорошо известный в среде дизайнеров Shelley Allegro настолько блистателен, что легко покорит сердца миллионов, когда мы с его помощью скажем «Hello!». По нашим сведениям этот шрифт доступен лишь на 1,65 % компьютеров во всём мире. Потому, потратим чуть-чуть времени и создадим изображение со все тем же текстом «Hello world!». Любой пользователь любого броузера, в котором не отключен показ изображений, увидит наше приветствие, набранное шрифтом Shelley Allegro даже на тех компьютерах, где он не установлен.

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

    Итак, у нас есть кусочек HTML кода, великолепное послание миру в виде текста и оно же в виде презренного изображения. Что же мы с ними сделаем? Давайте закатаем рукава и используем небольшую таблицу стилей для замены текста изображением.

    Замена изображением. Метод Фарнера

    Этот метод назван в честь Тодда Фарнера (Todd Fahrner) — одного из людей, которых впервые посетила эта идея. Вас может удивить наличие вокруг строки приветствия двух тегов — div и span. Фактически, вместо них могли бы быть любые другие, необходимые конкретно для ваших задач. Но мы будем использовать в нашем примере именно эти «оберточные» теги.

    Таблица стилей, которая осуществляет подмену, состоит из двух простых стилевых правил. Во-первых, используются с помощью набора свойств фона (background) мы помещаем наше изображение на задний план элемента div.

    Обратите внимание на свойство height. Его значением является действительная высота нашего изображения, тем самым обрамляющий div обязан показать изображение полностью, заняв ровно столько по высоте, сколько нужно — ни больше ни меньше. Свойство background-repeat в данном случае указывает на то, что фоновое изображение не должно автоматически повторяться вдоль вертикали и горизонтали.


    Нам остаётся лишь скрыть текстовую строку, изначально помещённую в HTML код. Вот для чего появился тег span — мы нуждаемся во втором элементе, чтобы непосредственно к нему можно было бы «привязать» невидимость. Это легко осуществить.

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

    Илон Маск рекомендует:  Псевдокласс read-write

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

    Что ж, давайте перейдём к рассмотрению нескольких реальных примеров.

    Пример первый. Заголовки страниц

    Пример подобной замены можно увидеть на большинстве основных страниц сайта stopdesign.com. Обратите внимание на главные заголовки каждого раздела или страницы (например, «Recent Log Entries» на главной странице). Они создавались без манипуляции свойствами текста с помощью CSS. Это изображения, любовно обработанные так, чтобы соответствовать шрифту логотипа. Особое внимание было обращено на совпадение фоновых цветов изображений с фоном тех частей страниц, где они должны находиться. Эффект едва уловимый, но неотъемлемый для подчеркивания индивидуальности сайта.

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

    , внутри которого находится простой текст, т.е. обычный текстовый html-заголовок, занимающий свое обычное положение в иерархии страницы.

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

    Один из методов привязки изображений-заголовков для разделов сайтов состоит в создании контекста, в котором эти изображения-заголовоки используются. В элементе каждой страницы определенного раздела атрибутам id или class присваивается уникальное значение. Затем, используя селекторы наследования, к каждому тегу

    привязывается соответствующее изображение в зависимости от того, в контексте какого элемента данный тег

    появляется (пара body#sectionForum h1 или body.sectionForum h1). Но в каждом разделе сайта может быть несколько типов страниц, и нам может понадобиться создать заголовки, соответствующие дочерним страницам разделов.

    Гораздо разумнее присвоить каждому заголовку идентификатор id, содержащий сокращённое название этого заголовка. Для примера: заголовок Recent Log Entries на главной странице stopdesign.com имеет идентификатор «t-reclog». Префикс «t-» добавлен для того, чтобы создать уникальное значение, и чтобы случайно не создать идентификатор, который уже существует у какого-либо другого элемента. В данном случае «t-» всегда означает, что это идентификатор заголовка страницы (от слова title). Правда, разметка становится слегка избыточной, но это позволяет достичь наибольшей гибкости в привязке любых титульных изображений к заголовкам любых страниц.

    Каждый заменяемый заголовок должен быть описан несколькими стилевыми правилами, которые характерны для всех других подобных заголовков. В дополнение к атрибуту «id», в заголовке, который необходимо подменить, мы используем еще и атрибут «class», которому присваиваем значение «swap». Этот класс создан для описания общих свойств подменяемых заголовков, что позволяет задать эти общие свойства всего один раз, не прописывая их всякий раз в стилевых свойствах каждого идентификатора id каждого конкретного заголовка. Кроме того, такой подход помогает не перечислять в таблице стилей все уникальные идентификаторы только для того, чтобы присвоить им одно и то же правило, общее для всех. Благодаря этому подстановка будет применена только к тем тегам

    , которые имеют класс «swap». Для не подлежащих замене тегов

    в этом случае не придётся писать никакие отменяющие замену правила. Добавление класса — маленькая жертва чистотой разметки в пользу упрощения таблицы стилей.

    Для замены заголовков изображением stopdesign.com использует следующие правила:

    Для простоты редактирования и поддержки сайта, все правила для заголовков страниц вынесены в отдельный файл titles.css, который импортирован в основной файл screen.css. screen.css в свою очередь подключен к html-странице с помощью элемента
    .

    Пример второй. Податливые буквицы

    Хотелось ли вам когда-нибудь украсить первый абзац своей страницы буквицей? До сих пор с содроганием вспоминаете увеличенную средствами HTML до пятисот процентов первую букву? Что скажете, если мы используем вместо этого изображение? Конечно же, не хотелось бы лишиться первой буквы в том случае, если картинка не загружена. Немного изменив описанную выше методику, мы сможем использовать для буквицы практически любой шрифт, какой захотим. Например, давайте снова обратимся к старому доброму Shelley Allegro и создадим на его основе букву «E», которая послужит буквицей для этого же абзаца.

    Нас не устроит буквица, стоящая особняком на строке (именно так получилось бы, если бы мы заключили её в тег div). Договоримся, что мы не хотим, чтобы первая буква как-нибудь выделялась на общем фоне в том случае, когда стилевые правила недоступны для броузера. В таком случае мы используем пару универсальных тегов span:

    Помните, что мы применяем фоновое изображение к внешнему тегу , а внутренний используем для сокрытия текста. В этом примере мы зададим для внешнего тега «плавучесть» (float) для того, чтобы текст абзаца охватывал его справа и снизу. Для лучшей совместимости с различными броузерами зададим для этого же элемента свойство display: block; (впрочем, это должно произойти автоматически при использовании float). У нас получится вот такой набор стилевых правил:

    Ширина и высота для первого правила взяты такими же, как соответствующие размеры изображения. Кроме того, мы применили небольшой правый отступ (margin-right) для нашей буквицы. Объединив HTML и CSS и применив кое-какие мелкие стилевые правила к самому абзацу, мы получили вот такой образчик буквицы.

    Творческое использование метода ограничено лишь возможностями нашего воображения. Этим способом, среди прочего, можно:

    * Создавать логотипы и названия, основанные на использовании шрифта
    * «Отливать» заголовки
    * Отображать котировки акций
    * Заменять отдельные слова с целью улучшения косметического эффекта (например, замена «and» и «vs.»)

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

    Заменяйте осторожно

    Вышеизложенный метод следует использовать с особой ответственностью. В изображении всегда должен быть тот же самый текст, что и в спрятанном html-коде. В противном случае будет несправедливо показывать пользователям при включенных стилях одно, а при выключенных — другое. Изображение-заменитель может отличаться размером и способом написания шрифта, его цветом и расстоянием между символами. Но эти стилистические решения определяются лишь графическим дизайном страницы, и их не следует применять к заменяемому html-тексту. Например, если повторить склеивание слов (т.е. удаление между ними пробела, как сделано в графических заголовках сайта stopdesign.com) в html-тексте, голосовые броузеры и броузеры для слепых превратят текст в кашу. Следовательно, html-текст должен быть оформлен с соблюдением орфографии и синтаксиса, как если бы он предназначался для страницы без стилей.

    Необходимо упомянуть несколько очень серьезных недостатков этого метода:

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

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

    В-третьих, пользователь не сможет манипулировать графическим текстом: не выйдет поменять у заголовка размер, цвет или сделать его более контрастным (т.е. всё то, что так легко можно сделать с обычным текстом).

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

    И помните, что чрезмерное (или неправильное) использование хороших приёмов может со временем выйти боком. Мы всегда применяем этот метод редко и очень осторожно.
    Совместимость с броузерами:

    Mac: Camino .7+, IE 5+, Mozilla, Netscape 6+, OmniWeb 4+, Opera 5+, Safari

    Win: Firebird .6+, IE 5+, Mozilla, Netscape 6+, Opera 5+, Phoenix .5+

    ВАЖНЫЕ ПРИМЕЧАНИЯ

    Метод не смог пройти проверку несколькими популярными программами, читающими пользователю текст с экрана. См. статью на сайте A List Apart: Facts and Opinion About Fahrner Image Replacement.

    Результаты исследования, проведенного Джо, показывают, наша идея создать что-то более гибкое, чем простые изображения с прописанным для них атрибутом alt, потерпела фиаско. Мы предполагали, что в броузерах со включенным показом графики текст будет скрыт стилевым правилом display:none, а в голосовые броузеры чётко его прочитают пользователю. Оказалось, что некоторые броузеры так не делают даже в том случае, когда мы прописываем в стилях media=»screen», так как они буквально зачитывают то, что было бы видно на экране. Большинство голосовых броузеров не поддерживают media=» aural», так что пропадает всякий смысл использования свойств «speak» в таблице стилей для них.

    Поступали предложения воспользоваться вместо «display:none;» правилом «visibility:hidden;», но это также не решало проблему прочтения «спрятанных» участков текста в большинстве голосовых броузеров. Текущая версия популярной программы JAWS — пожалуй самый распространенный голосовой броузер — все-таки читает текст, скрытый методом Фарнера. Но, глядя на действия других подобных программ, мы не можем положиться на то, что следующие версии JAWS сохранят эту функцию.

    Как и при работе с любой другой контент-преобразующей (content-altering) методикой, перед тем, как ее применять, следует тщательно взвесить все преимущества и недостатки при решении конкретных задач вёрстки. Со времени написания статьи появилось ещё несколько методов, решающих подобную задачу — каждый со своими достоинствами. Однако ни один из методов так и не является универсальным решением трюка с подменой текста на изображение. Ниже приведён краткий перечень альтернативных способов:

    Преобразование Лихи/Лэнгриджа [Leahy/Langridge Image Replacement (LIR)]
    Суть: содержимое тэга скрывается путём задания предку тэга нулевой высоты (height: 0;) и невидимости (overflow: hidden;). Затем задаётся верхний отступ (padding-top), соответствующий высоте фонового изображения. Метод предложен в одно и тоже время Симусом Лихи и Стюартом Лэнгриджем (Seamus Leahy and Stuart Langridge).

    Сдвиг текста методом Рандла (Rundle’s Text-Indent Method)
    Майк Рандл (Mike Rundle) изобрёл простой трюк с использованием CSS-свойства «text-indent» для сдвига участка текста за пределы видимой области элемента.

    Можно ли в инпуте вывести текст разного цвета?

    Можно ли звёздочку окрасить в красный цвет?
    Или как-то по-другому можно реализовать?

    3 ответа 3

    Раскрасить часть значения placeholder ‘а (если вы именно его используете) нельзя. Можно сделать так:

    Для выражения «обязательности» поля для заполнения можно использовать: звёздочку в элементе label рядом с input ( например,

    и для sup в css:

    ) или менять цвет outline с помощью одноимённого css-свойства для input’a ( например, на тот же красный).

    Именно текст разного цвета вывести в input нельзя, но сделать то, что вы хотите, можно.

    Вариант со стилями и абсолютным позиционированием другого элемента привели выше.


    Вот мой вариант решения этой задачи:
    Суть идеи: использовать в качестве фона картинку вместо текста.

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

    Псевдоэлемент::placeholder color ( в некоторых случаях псевдокласс ) позволяет задать текстовое наполнение элемента формы. Он устанавливается при помощи атрибута placeholder : .

    Этот текст можно стилизовать для большинства современных браузеров с помощью специальных префиксов:

    Предупреждение: это нестандартный синтаксис, с этим связаны и странные названия. :placeholder-shown – это стандарт, и даже авторы спецификации, вероятно, думают, что ::placeholder стандартизирован.

    Как и в случае с любым псевдоэлементом, его вы можно применять к определенным элементам следующим образом:

    Разница между:placeholder-shown и::placeholder

    :placeholder-shown предназначен для выделения формы ввода, а CSS placeholder color отвечает за стилизацию текста.

    Взгляните на диаграмму:

    Оказалось, что многих это сбивает с толку, и я часто вижу спецификацию, где есть :placeholder-shown , но отсутствует ::placeholder .

    Нужно отметить, что :placeholder-shown может влиять на стилизацию текста, так как является для него родительским элементом ( например, можно изменять font-size ).

    Обратите внимание: :placeholder-shown – псевдокласс ( элемент в конкретном состоянии ), а ::placeholder – это псевдоэлемент ( видимая часть, которая находится не в DOM ). Отличаются они одинарными и дойными кавычками.

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

    Элемент или класс?

    В этом плане input placeholder color не стандартизирован. Это значит, что у каждого браузера своё понимание того, как это должно работать.

    Изначально этот псевдокласс был внедрён в браузер Firefox . Этот псевдокласс даёт не так уж много пространства для манёвра. Например, если нужно изменить цвет текста при выделении формы ввода, потребуется использовать селектор типа input:focus::placeholder . А псевдокласс не позволяет этого сделать.

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

    Цвет заглушки в Firefox

    Вы заметили, что цвет заглушек выглядит более тусклым по сравнению с другими браузерами. На картинке, приведенной ниже, слева показан Firefox 43 , а справа — Chrome 47 :

    Так происходит потому, что по умолчанию все «заглушки » в Firefox получают дополнительное значение прозрачности. Чтобы избавиться от этого эффекта, нам понадобится следующая строка кода:

    Попробуйте открыть это демо в браузере Firefox .

    Поддержка стилей

    Псевдоэлемент поддерживает следующие свойства:

    • font properties ;
    • color ;
    • background properties ;
    • word-spacing ;
    • letter-spacing ;
    • text-decoration ;
    • vertical-align ;
    • text-transform ;
    • line-height ;
    • text-indent ;
    • opacity ;

    Дополнительные ресурсы

    Документация MDN
    Документация IE
    Развёрнутая статья на блоге Treehouse

    Атрибут placeholder используется для создания подсказок внутри пустых полей ввода (теги и

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

    Начнём с примера для тех, кто ещё не знает, что такое плэйсхолдер и как его использовать:

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

    Стилизация

    Для стилизации плэйсхолдеров используются следующие правила:

    ::-webkit-input-placeholder < color : blue ; >::-moz-placeholder < color : blue ; >/* Firefox 19+ */ :-moz-placeholder < color : blue ; >/* Firefox 18- */ :-ms-input-placeholder

    Выглядит ужасно, не так ли? И на это есть причина — до сих пор CSS правила для плэйсхолдеров не были стандартизированы и имплементация в каждом браузере различная. Подробнее о всех необходимых префиксах можно узнать на caniuse .

    Если вы используете CSS-препроцессор, то, скорее всего, для применения стилей к плэйсхолдерам вам будет удобнее всего написать простой миксин. Пример на Sass:

    В зависимости от контекста миксин можно использовать как для глобального применения стилей, так и для отдельных элементов (опробуйте на SassMeister):

    // Глобально для каждого поля ввода @include placeholder < color : blue ; >// Для определённых полей ввода .input < @include placeholder < color : green ; >>

    Пример

    Синий текст для плэйсхолдера (никогда так не делайте):

    .blue-text ::-webkit-input-placeholder < color : #2e8ece ; >.blue-text :-moz-placeholder < color : #2e8ece ; >.blue-text ::-moz-placeholder < color : #2e8ece ; >.blue-text :-ms-input-placeholder

    Поддерживаемые свойства

    Не каждое CSS свойство можно использовать с плэйсхолдерами. Вот полный список поддерживаемых свойств:

    • font и все связанные свойства (font-size , font-family и т.д.)
    • background и все связанные свойства (background-color , background-image и т.д.)
    • opacity
    • text-indent
    • text-overflow
    • color
    • text-transform
    • line-height
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align

    Анимации

    Идеи анимаций принадлежит блогу html5.by .

    Все следующие примеры написаны с использованием препроцессора Sass . К каждому прилагается ссылка на SassMeister, по которой вы сможете найти скомпилированный CSS код.

    Скорее всего, вы захотите применять анимации к плэйсхолдерам при фокусе на поле ввода. Делается всё это достаточно просто. Достаточно всего несколько раз использовать написанный ранее миксин placeholder:

    Изменение прозрачности

    Сдвиг вправо и влево

    Чем больше ширина поля ввода, тем больше должно быть значение свойства text-indent . Для стандартного поля ввода будет достаточно 500px , для более широких стоит подбирать вручную. От ширины поля ввода и значения text-indent зависит скорость анимации. Для сдвига влево нужно использовать отрицательные значения, например -500px .

    Сдвиг вниз


    Как и в прошлом примере анимация зависит от размеров воля ввода, но в этом случае внимание своит обратить на высоту. Для подавляющего большинства полей ввода искомое значение line-height будет находиться в пределах 100px . К сожалению, с помощью свойства line-height невозможно реализовать эффект сдвига вверх, так как свойство не принимает отрицательные значения.

    Всё вместе

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

    @mixin placeholder < & : :- webkit-input-placeholder < @content >& : — moz-placeholder < @content >& : :- moz-placeholder < @content >& : — ms-input-placeholder < @content >> @mixin pl-shift ($s >Использовать её очень просто. Достаточно подключить желаемый миксин к любому полю ввода или просто создать одно глобальное правило для всех пэйсхолдеров на странице:

    // Для отдельных элементов .pl-shift-right < @include pl-shift ( right ); >.pl-fade-out < @include pl-fade-out ; >// Для всего остального @include pl-shift ( left );

    Autoprefixer

    Если вы не используете препроцессор и всё ещё не хотите, чтобы ваш исходный CSS файл превратился в кашу из префиксов для всех возможных браузеров, то обратите внимание на Autoprefixer . С его помощью чистый CSS можно сделать грязным (но уже в другом файле), добавив все необходимые префиксы ко всем свойствам. Чтобы заставить плагин работать с пэйсхолдерами достаточно использовать псевдоэлемент::placeholder:

    Илон Маск рекомендует:  Комплексные селекторы

    ::placeholder < color : orange ; >. input : : placeholder

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

    Что дальше

    Как я уже писал выше, всё, что связано с применением стилей к плэйсхолдерам ещё не стандартизировано. Скоро это исправят. В спецификацию Selector Level 4 был добавлен псевдокласс:placeholder-shown , который, наконец-то, приведёт к стандарту всю ту безумную смесь из псевдоклассов и псевдоэлементов, которая существует сейчас. Следить за поддержкой можно на caniuse (сейчас не поддерживается ни в одном браузере).

    Применять стили с помощью:placeholder-shown будет гораздо проще:

    У элементов ввода есть атрибут «placeholder». С его помощью можно вывести текст в поле ввода который исчезает при начале заполнения. Браузеры по разному отображают плейсхолдер, а устаревшие — вовсе не поддерживают. Однако, существуют способы обхода всех недостатков этого полезного атрибута. Рассмотрим следующие моменты:

    • изменение стиля плейсхолдера;
    • скрытие сразу при нажатии на поле;
    • отображение в браузерах, которые не поддерживают атрибут.

    Для примера возьмём текстовое поле input и будем применять к нему стили.

    Изменение цвета placeholder

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

    Если не указать «opacity», то цвет в браузерах, поддерживающих прозрачность, будет розовым. Так же можно указать для разных полей разные цвета. Для этого используйте классы.

    Input-1::-webkit-input-placeholder < color:red; >.input-2::-webkit-input-placeholder < color:green; >. и.т.д.

    Убираем placeholder при нажатии на поле

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

    :focus::-webkit-input-placeholder /* webkit */ :focus::-moz-placeholder /* Firefox 19+ */ :focus:-moz-placeholder /* Firefox 18- */ :focus:-ms-input-placeholder /* IE */

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

    Кроссбраузерность placeholder

    Устаревшие браузеры не поддерживают атрибут «placeholder» — он просто не будет отображаться. К таким браузерам относится IE8. Несмотря на прекращение поддержки Internet Explorer, есть «люди» которые им пользуются. Если плейсхолдер не несёт важной информации, то можно забить на его отображение, но если увидеть содержимое подсказки должен каждый, то разработчик обязан позаботиться о полной кроссбраузерности.

    Для отображени подсказки в браузерах, которые не поддерживают атрибут, будем использовать jquery плагин.

    Скачиваем его и подключаем. Не забываем, что должна быть подключена так же jquery библиотека. Применяем плагин к элементам ввода с атрибутом «placeholder»:

    Плагин срабатывает только если браузер не поддерживает плейсхолдеры. В таком случае элементам, к которым он применён, присваивается класс «placeholder», а в «value» записывается текст из атрибута «placeholder». При фокусе «value» очищается. Чтобы текст из атрибута не выглядел точно так же как вводимый текст, оформляем его с помощью стилей, опираясь на устанавливаемый класс. В примере цвет текста неактивного поля будет зелёным. Но увидеть это можно только в IE8 или других устаревших браузерах.

    Привет, сегодня использованием placeholder у input уже никого не удивишь. Placeholder — это такой временный текст с примером внутри input, который исчезает при вводе текста. CSS стиль для placeholder, мы и постараемся сегодня прописать.

    Задача: сделать свой css стиль для placeholder

    Допустим у нас есть стильный сайт, в котором в input используется placeholder. Нам нужно сделать так, чтобы серый муторный стиль текста placeholder’a выглядел в общем стиле сайта. Как же этого достичь? Сразу скажу, что это работает пока не во всех браузерах. Конкретно в IE версии 9 и ниже не работает вообще, в 10 и далее пока работает с большими трудностями. Другое дело Firefox и webkit-браузеры.

    Решение: css стиль для placeholder

    Итак, задачу мы поставили, как же будем её решать?

    Сначала сделаем полигон для тестирования:

    Готово, теперь посмотрим, что можно сделать со стилем: у webkit и mozilla есть собственные модификаторы, которые позволяют назначать особенный стиль для placeholder: ::-webkit-input-placeholder и:-moz-placeholder. Посмотрим как их использовать:

    Опишем стиль самого input и текст в нем (синий цвет для контраста в примере):

    Теперь пропишем специальный стиль для текста placeholder в этом input для Webkit браузеров (Chrome, Safari, Opera):

    Сделаем текст плейсхолдера красным жирным курсивом. Обратите внимание, в отличие от других псевдо-классов CSS, которые отделяются одинарным двоеточием, стиль для placeholder в webkit отделяется двойным двоеточием.

    Теперь пропишем точно такой же стиль для Mozilla Firefox браузеров:

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

    Надеюсь, эта статья поможет вам сделать ваш сайт более удобным для пользователей.

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

    Где находится плейсхолдер?

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

    Стилизация placeholder на CSS выглядит так:

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

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

    • ::-webkit-input-placeholder — для webkit-браузеров (Safari, Chrome, Opera);
    • ::-moz-placeholder — для браузеров Firefox выше 19 версии;
    • :-moz-placeholder — для старых Firefox;
    • :-ms-input-placeholder — для Internet Explorer выше 10 версии.

    Как видно, старые браузеры Mozilla, а также IE считают placeholder CSS-псевдоклассом, а не псевдоэлементом. Не будем с ними спорить, просто учтем этот аспект при стилизации поля ввода.

    Возможности стилизации

    Для псевдоэлемента placeholder в CSS можно установить следующие параметры:

    • фон — группа блока подсказки распространяется на все поле ввода. Можно задать не только цвет (background-color), но и изображение (background-image).
    • цвет текста — color;
    • прозрачность — opacity;
    • подчеркивание, надчеркивание или зачеркивание — text-decoration;
    • регистр — text-transform;
    • внутренние отступы — padding. Поддерживается не всеми браузерами. Как для строчных элементов, верхний и нижний отступы игнорируются.
    • отображение шрифта — свойства группы font, line-height и разнообразные отступы (text-indent, letter-spacing, word-spacing);
    • вертикальное выравнивание в строке — vertical-align;
    • обрезка текста при переполнении контейнера — text-overflow.


    .input1::placeholder < background-image: linear-gradient(lime, blue); color: white; >.input2::placeholder < text-decoration: line-through; color: purple; font-weight: bold; >.input3::placeholder < font-size: 16px; letter-spacing: 10px; >.input4::placeholder

    В фокусе

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

    В некоторых браузерах допустимо анимировать изменение ряда свойств плейсхолдера с помощью инструкции transition.

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

    Как изменить цвет выделяемого текста и цвет подсказки в полях ввода

    Для изменения цвета выделяемого текста используйте псевдоэлемент selection и placeholder — текст-подсказка для элементов ввода.

    Для изменения цвета выделяемого текста используйте псевдоэлемент ::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background и background-color.

    placeholder — текст-подсказка для элементов ввода.

    Задается он следующим образом:

    Обычно этот текст отображается серым цветом, но допустим у нас есть необходимость стилизовать этот текст с помощью CSS.

    Пока это можно сделать только в Google Chrome, Safari и Firefox, так как в Opera пока еще нет возможность задавать для него стили, а IE не поддерживает его вовсе.

    CSS правила для webkit и mozilla:

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

    Добавление замещающего текста к фигуре, картинке, диаграмме, рисунку SmartArt или к другому объекту

    Примечание: Мы стараемся как можно оперативнее обеспечивать вас актуальными справочными материалами на вашем языке. Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Просим вас уделить пару секунд и сообщить, помогла ли она вам, с помощью кнопок внизу страницы. Для удобства также приводим ссылку на оригинал (на английском языке).

    Вы можете создать замещающий текст (замещающий текст) для фигур, рисунков, диаграмм, Графические элементы SmartArt или других объектов в документе Office. Замещающий текст позволяет людям с нарушениями зрения понимать содержание рисунков и других графических материалов. Когда кто-то использует средства чтения с экрана для просмотра документов, он будет слышать замещающий текст; без замещающего текста пользователь сможет узнать, что он достигает рисунка, но не узнает о том, что показано на рисунке.

    В этой статье объясняется, как добавить замещающий текст для фигуры, рисунка, диаграммы, схемы, Графический элемент SmartArt или другого объекта.

    В этом разделе

    Excel для Office 365, Outlook для Office 365, PowerPoint для Office 365 и Word для Office 365

    Добавление замещающего текста

    Выполните одно из следующих действий.

    Щелкните объект правой кнопкой мыши и выберите Изменить замещающий текст.

    Выберите объект. Выберите формат > замещающий текст.

    Примечание: Чтобы добавить замещающий текст для всего графического элемента SmartArt или диаграммы, щелкните границу соответствующего графического объекта или диаграммы, а не отдельную форму или участок.

    На панели Замещающий текст введите 1 – 2 предложения в текстовом поле для описания объекта и его контекста для того, кто не сможет его видеть.

    Пометьте визуальные элементы как декоративные

    Если ваш визуальный контент имеет исключительно декоративный характер и призваны привлекать внимание и вызывать интерес, вы можете пометить их как не нуждающиеся в описании замещающим текстом. Примерами объектов, которые должны помечаться как декоративные, служат стилистические границы. Люди, использующие средства чтения с экрана, будут слышать, что эти объекты являются декоративными, что позволит им понимать, что они не пропускают важные сведения. Вы можете пометить ваш визуальный контент как декоративный в Excel, PowerPoint и Word.

    Чтобы открыть панель Замещающий текст, выполните следующее:

    Щелкните изображение правой кнопкой мыши и выберите Изменить замещающий текст.

    Щелкните изображение, выберите Формат > Замещающий текст.

    Отметьте флажок Декоративный. Поле для ввода текста становится недоступным.

    Переключатель автоматического включения и отключения замещающего текста

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

    Выберите Файл > Опции > Удобство доступа.

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

    Excel 2020, Outlook 2020, PowerPoint 2020 и Word 2020

    Добавление замещающего текста

    Выполните одно из следующих действий.

    Щелкните объект правой кнопкой мыши и выберите Изменить замещающий текст.

    Выберите объект. Выберите формат > замещающий текст.

    Примечание: Чтобы добавить замещающий текст для всего графического элемента SmartArt или диаграммы, щелкните границу соответствующего графического объекта или диаграммы, а не отдельную форму или участок.

    На панели Замещающий текст введите 1 – 2 предложения в текстовом поле для описания объекта и его контекста для того, кто не сможет его видеть.

    Совет: Сэкономьте время и добавьте замещающий текст, генерируемый системой для объекта. На панели Замещающий текст выберите Создавать описание для меня. В диалоговом окне Сделать работу Office умней для вас, выберите Включить. Затем измените автоматический замещающий текст, чтобы оптимальным образом настроить содержимое.

    Пометьте визуальные элементы как декоративные

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

    Чтобы открыть панель Замещающий текст, выполните следующее:

    Щелкните изображение правой кнопкой мыши и выберите Изменить замещающий текст.

    Щелкните изображение, выберите Формат > Замещающий текст.

    Отметьте флажок Декоративный. Поле для ввода текста становится недоступным.

    Excel 2020/2013, Outlook 2020/2013, PowerPoint 2020/2013 и Word 2020/2013

    Выполните одно из следующих действий.

    Для фигуры, рисунка, диаграммы, Графический элемент SmartArt или другого объект щелкните объект правой кнопкой мыши, выберите команду Формат объекта, Формат рисунка, Формат области диаграммыили другой, а затем щелкните замещающий текст.


    Примечание: Область с элементом Замещающий текст динамична, заголовок и списки в ней зависят от выбранного объекта.

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

    Для Excel сводной таблицы щелкните правой кнопкой мыши, наведите указатель мыши на элемент Параметры сводной таблицы и выберите пункт Замещающий текст.

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

    Совет: Если вам не нужен замещающий текст, удалите слова в полях Заголовок и Описание и или не заполняйте их.

    При необходимости введите краткое описание в поле Заголовок. Это поле следует заполнять только в том случае, если поле Описание содержит длинное или подробное описание.

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

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

    Чтобы вызвать команду Замещающий текст на Панели быстрого доступа, выберите фигуру, рисунок, диаграмму, Графический элемент SmartArt или другой объект, нажмите кнопку на панели инструментов и введите ваш замещающий текст.

    В левом верхнем углу над лентой щелкните элемент Настроить панель быстрого доступа .

    Выберите Дополнительные команды > Выбрать команды из > Команды не на ленте.

    Нажмите Замещающий текст > добавить.

    Excel 2010, Outlook 2010, PowerPoint 2010 и Word 2010

    Выполните одно из следующих действий:

    Для фигуры, рисунка, диаграммы, объекта Графический элемент SmartArt щелкните на объекте правой кнопкой мыши, выберите Формат объекта, а затем щелкните на панели Замещающий текст.

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

    Для Excel сводной таблицы щелкните правой кнопкой мыши, наведите указатель мыши на элемент Параметры сводной таблицы и выберите пункт Замещающий текст.

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

    При необходимости введите краткое описание в поле Заголовок. Это поле следует заполнять только в том случае, если поле Описание содержит длинное или подробное описание.

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

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

    Чтобы вызвать команду Замещающий текст на Панели быстрого доступа, выберите фигуру, рисунок, диаграмму, Графический элемент SmartArt или другой объект, нажмите кнопку на панели инструментов и введите ваш замещающий текст.

    В левом верхнем углу над лентой щелкните элемент Настроить панель быстрого доступа .

    Выберите Дополнительные команды > Выбрать команды из > Команды не на ленте.

    Нажмите Замещающий текст > добавить.

    Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS? Как изменить цвет замещающего текста поля формы.

    Что такое placeholder (плейсхолдер)? Это английское слово переводится как заполнитель . Используется в качестве пояснения или примера в полях ввода текста (имя, фамилия, e-mail и т. п.), в виде атрибута.

    На данный момент поддерживается всеми современными браузерами. Ранее работа эмулировалась с помощью JavaScript. Элемент доказал свою пользу и разработчики браузеров ввели дополнительные свойства, позволяющие стилизовать «заполнитель» под свой дизайн.

    До сих пор нет единого мнения, является ли плейсхолдера псевдоклассом или псевдоэлементом. на основе WebKit/blink и Gecko (Firefox 19+) считают псевдоклассом (:, обозреватели Internet Explorer (движок Trident) и Firefox 18- относят к псевдоэлементам (. Opera 12 вообще не позволяет изменять оформление, хотя атрибут поддерживается. И пока в CSS не будет официально закреплён этот пресдо-тип, склока между разработчиками продолжится.

    Илон Маск рекомендует:  Amp для ос windows установка, настройка, использование

    К счастью, устаревшие браузеры довольно оперативно заменяются новыми версиями — Chrome и Firefox с ускоренным циклом разработки «дисциплинировали» пользователей.

    Если решите поддерживать старые версии обозревателей (Opera 12, IE8 для Windows XP, IE9 — Windows Vista), придётся действовать .

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

    Как обычно выглядит форма:

    Пример с плейсхолдером:

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

    Изменяем вид placeholder посредством css

    Теперь, сделаем цвет плейсхолдера оранжевым и более блеклым (полупрозрачным):

    У элементов ввода есть атрибут «placeholder». С его помощью можно вывести текст в поле ввода который исчезает при начале заполнения. Браузеры по разному отображают плейсхолдер, а устаревшие — вовсе не поддерживают. Однако, существуют способы обхода всех недостатков этого полезного атрибута. Рассмотрим следующие моменты:

    • изменение стиля плейсхолдера;
    • скрытие сразу при нажатии на поле;
    • отображение в браузерах, которые не поддерживают атрибут.

    Для примера возьмём текстовое поле input и будем применять к нему стили.

    Изменение цвета placeholder

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

    Если не указать «opacity», то цвет в браузерах, поддерживающих прозрачность, будет розовым. Так же можно указать для разных полей разные цвета. Для этого используйте классы.

    Input-1::-webkit-input-placeholder < color:red; >.input-2::-webkit-input-placeholder < color:green; >. и.т.д.

    Убираем placeholder при нажатии на поле

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

    :focus::-webkit-input-placeholder /* webkit */ :focus::-moz-placeholder /* Firefox 19+ */ :focus:-moz-placeholder /* Firefox 18- */ :focus:-ms-input-placeholder /* IE */

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

    Кроссбраузерность placeholder

    Устаревшие браузеры не поддерживают атрибут «placeholder» — он просто не будет отображаться. К таким браузерам относится IE8. Несмотря на прекращение поддержки Internet Explorer, есть «люди» которые им пользуются. Если плейсхолдер не несёт важной информации, то можно забить на его отображение, но если увидеть содержимое подсказки должен каждый, то разработчик обязан позаботиться о полной кроссбраузерности.

    Для отображени подсказки в браузерах, которые не поддерживают атрибут, будем использовать jquery плагин.

    Скачиваем его и подключаем. Не забываем, что должна быть подключена так же jquery библиотека. Применяем плагин к элементам ввода с атрибутом «placeholder»:


    Плагин срабатывает только если браузер не поддерживает плейсхолдеры. В таком случае элементам, к которым он применён, присваивается класс «placeholder», а в «value» записывается текст из атрибута «placeholder». При фокусе «value» очищается. Чтобы текст из атрибута не выглядел точно так же как вводимый текст, оформляем его с помощью стилей, опираясь на устанавливаемый класс. В примере цвет текста неактивного поля будет зелёным. Но увидеть это можно только в IE8 или других устаревших браузерах.

    Псевдоэлемент::placeholder color ( в некоторых случаях псевдокласс ) позволяет задать текстовое наполнение элемента формы. Он устанавливается при помощи атрибута placeholder : .

    Этот текст можно стилизовать для большинства современных браузеров с помощью специальных префиксов:

    Предупреждение: это нестандартный синтаксис, с этим связаны и странные названия. :placeholder-shown – это стандарт, и даже авторы спецификации, вероятно, думают, что ::placeholder стандартизирован.

    Как и в случае с любым псевдоэлементом, его вы можно применять к определенным элементам следующим образом:

    Разница между:placeholder-shown и::placeholder

    :placeholder-shown предназначен для выделения формы ввода, а CSS placeholder color отвечает за стилизацию текста.

    Взгляните на диаграмму:

    Оказалось, что многих это сбивает с толку, и я часто вижу спецификацию, где есть :placeholder-shown , но отсутствует ::placeholder .

    Нужно отметить, что :placeholder-shown может влиять на стилизацию текста, так как является для него родительским элементом ( например, можно изменять font-size ).

    Обратите внимание: :placeholder-shown – псевдокласс ( элемент в конкретном состоянии ), а ::placeholder – это псевдоэлемент ( видимая часть, которая находится не в DOM ). Отличаются они одинарными и дойными кавычками.

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

    Элемент или класс?

    В этом плане input placeholder color не стандартизирован. Это значит, что у каждого браузера своё понимание того, как это должно работать.

    Изначально этот псевдокласс был внедрён в браузер Firefox . Этот псевдокласс даёт не так уж много пространства для манёвра. Например, если нужно изменить цвет текста при выделении формы ввода, потребуется использовать селектор типа input:focus::placeholder . А псевдокласс не позволяет этого сделать.

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

    Цвет заглушки в Firefox

    Вы заметили, что цвет заглушек выглядит более тусклым по сравнению с другими браузерами. На картинке, приведенной ниже, слева показан Firefox 43 , а справа — Chrome 47 :

    Так происходит потому, что по умолчанию все «заглушки » в Firefox получают дополнительное значение прозрачности. Чтобы избавиться от этого эффекта, нам понадобится следующая строка кода:

    Попробуйте открыть это демо в браузере Firefox .

    Поддержка стилей

    Псевдоэлемент поддерживает следующие свойства:

    • font properties ;
    • color ;
    • background properties ;
    • word-spacing ;
    • letter-spacing ;
    • text-decoration ;
    • vertical-align ;
    • text-transform ;
    • line-height ;
    • text-indent ;
    • opacity ;

    Дополнительные ресурсы

    Документация MDN
    Документация IE
    Развёрнутая статья на блоге Treehouse

    Атрибут placeholder используется для создания подсказок внутри пустых полей ввода (теги и

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

    Начнём с примера для тех, кто ещё не знает, что такое плэйсхолдер и как его использовать:

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

    Стилизация

    Для стилизации плэйсхолдеров используются следующие правила:

    ::-webkit-input-placeholder < color : blue ; >::-moz-placeholder < color : blue ; >/* Firefox 19+ */ :-moz-placeholder < color : blue ; >/* Firefox 18- */ :-ms-input-placeholder

    Выглядит ужасно, не так ли? И на это есть причина — до сих пор CSS правила для плэйсхолдеров не были стандартизированы и имплементация в каждом браузере различная. Подробнее о всех необходимых префиксах можно узнать на caniuse .

    Если вы используете CSS-препроцессор, то, скорее всего, для применения стилей к плэйсхолдерам вам будет удобнее всего написать простой миксин. Пример на Sass:

    В зависимости от контекста миксин можно использовать как для глобального применения стилей, так и для отдельных элементов (опробуйте на SassMeister):

    // Глобально для каждого поля ввода @include placeholder < color : blue ; >// Для определённых полей ввода .input < @include placeholder < color : green ; >>

    Пример

    Синий текст для плэйсхолдера (никогда так не делайте):

    .blue-text ::-webkit-input-placeholder < color : #2e8ece ; >.blue-text :-moz-placeholder < color : #2e8ece ; >.blue-text ::-moz-placeholder < color : #2e8ece ; >.blue-text :-ms-input-placeholder

    Поддерживаемые свойства

    Не каждое CSS свойство можно использовать с плэйсхолдерами. Вот полный список поддерживаемых свойств:

    • font и все связанные свойства (font-size , font-family и т.д.)
    • background и все связанные свойства (background-color , background-image и т.д.)
    • opacity
    • text-indent
    • text-overflow
    • color
    • text-transform
    • line-height
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align

    Анимации

    Идеи анимаций принадлежит блогу html5.by .

    Все следующие примеры написаны с использованием препроцессора Sass . К каждому прилагается ссылка на SassMeister, по которой вы сможете найти скомпилированный CSS код.

    Скорее всего, вы захотите применять анимации к плэйсхолдерам при фокусе на поле ввода. Делается всё это достаточно просто. Достаточно всего несколько раз использовать написанный ранее миксин placeholder:

    Изменение прозрачности

    Сдвиг вправо и влево

    Чем больше ширина поля ввода, тем больше должно быть значение свойства text-indent . Для стандартного поля ввода будет достаточно 500px , для более широких стоит подбирать вручную. От ширины поля ввода и значения text-indent зависит скорость анимации. Для сдвига влево нужно использовать отрицательные значения, например -500px .

    Сдвиг вниз

    Как и в прошлом примере анимация зависит от размеров воля ввода, но в этом случае внимание своит обратить на высоту. Для подавляющего большинства полей ввода искомое значение line-height будет находиться в пределах 100px . К сожалению, с помощью свойства line-height невозможно реализовать эффект сдвига вверх, так как свойство не принимает отрицательные значения.


    Всё вместе

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

    @mixin placeholder < & : :- webkit-input-placeholder < @content >& : — moz-placeholder < @content >& : :- moz-placeholder < @content >& : — ms-input-placeholder < @content >> @mixin pl-shift ($s >Использовать её очень просто. Достаточно подключить желаемый миксин к любому полю ввода или просто создать одно глобальное правило для всех пэйсхолдеров на странице:

    // Для отдельных элементов .pl-shift-right < @include pl-shift ( right ); >.pl-fade-out < @include pl-fade-out ; >// Для всего остального @include pl-shift ( left );

    Autoprefixer

    Если вы не используете препроцессор и всё ещё не хотите, чтобы ваш исходный CSS файл превратился в кашу из префиксов для всех возможных браузеров, то обратите внимание на Autoprefixer . С его помощью чистый CSS можно сделать грязным (но уже в другом файле), добавив все необходимые префиксы ко всем свойствам. Чтобы заставить плагин работать с пэйсхолдерами достаточно использовать псевдоэлемент::placeholder:

    ::placeholder < color : orange ; >. input : : placeholder

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

    Что дальше

    Как я уже писал выше, всё, что связано с применением стилей к плэйсхолдерам ещё не стандартизировано. Скоро это исправят. В спецификацию Selector Level 4 был добавлен псевдокласс:placeholder-shown , который, наконец-то, приведёт к стандарту всю ту безумную смесь из псевдоклассов и псевдоэлементов, которая существует сейчас. Следить за поддержкой можно на caniuse (сейчас не поддерживается ни в одном браузере).

    Применять стили с помощью:placeholder-shown будет гораздо проще:

    Привет, сегодня использованием placeholder у input уже никого не удивишь. Placeholder — это такой временный текст с примером внутри input, который исчезает при вводе текста. CSS стиль для placeholder, мы и постараемся сегодня прописать.

    Задача: сделать свой css стиль для placeholder

    Допустим у нас есть стильный сайт, в котором в input используется placeholder. Нам нужно сделать так, чтобы серый муторный стиль текста placeholder’a выглядел в общем стиле сайта. Как же этого достичь? Сразу скажу, что это работает пока не во всех браузерах. Конкретно в IE версии 9 и ниже не работает вообще, в 10 и далее пока работает с большими трудностями. Другое дело Firefox и webkit-браузеры.

    Решение: css стиль для placeholder

    Итак, задачу мы поставили, как же будем её решать?

    Сначала сделаем полигон для тестирования:

    Готово, теперь посмотрим, что можно сделать со стилем: у webkit и mozilla есть собственные модификаторы, которые позволяют назначать особенный стиль для placeholder: ::-webkit-input-placeholder и:-moz-placeholder. Посмотрим как их использовать:

    Опишем стиль самого input и текст в нем (синий цвет для контраста в примере):

    Теперь пропишем специальный стиль для текста placeholder в этом input для Webkit браузеров (Chrome, Safari, Opera):

    Сделаем текст плейсхолдера красным жирным курсивом. Обратите внимание, в отличие от других псевдо-классов CSS, которые отделяются одинарным двоеточием, стиль для placeholder в webkit отделяется двойным двоеточием.

    Теперь пропишем точно такой же стиль для Mozilla Firefox браузеров:

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

    Надеюсь, эта статья поможет вам сделать ваш сайт более удобным для пользователей.

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

    Псевдоэлемент::placeholder color ( в некоторых случаях псевдокласс ) позволяет задать текстовое наполнение элемента формы. Он устанавливается при помощи атрибута placeholder : .

    Этот текст можно стилизовать для большинства современных браузеров с помощью специальных префиксов:

    Предупреждение: это нестандартный синтаксис, с этим связаны и странные названия. :placeholder-shown – это стандарт, и даже авторы спецификации, вероятно, думают, что ::placeholder стандартизирован.

    Как и в случае с любым псевдоэлементом, его вы можно применять к определенным элементам следующим образом:

    Разница между:placeholder-shown и::placeholder

    :placeholder-shown предназначен для выделения формы ввода, а CSS placeholder color отвечает за стилизацию текста.

    Взгляните на диаграмму:

    Оказалось, что многих это сбивает с толку, и я часто вижу спецификацию, где есть :placeholder-shown , но отсутствует ::placeholder .

    Нужно отметить, что :placeholder-shown может влиять на стилизацию текста, так как является для него родительским элементом ( например, можно изменять font-size ).

    Обратите внимание: :placeholder-shown – псевдокласс ( элемент в конкретном состоянии ), а ::placeholder – это псевдоэлемент ( видимая часть, которая находится не в DOM ). Отличаются они одинарными и дойными кавычками.

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

    Элемент или класс?

    В этом плане input placeholder color не стандартизирован. Это значит, что у каждого браузера своё понимание того, как это должно работать.

    Изначально этот псевдокласс был внедрён в браузер Firefox . Этот псевдокласс даёт не так уж много пространства для манёвра. Например, если нужно изменить цвет текста при выделении формы ввода, потребуется использовать селектор типа input:focus::placeholder . А псевдокласс не позволяет этого сделать.

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

    Цвет заглушки в Firefox

    Вы заметили, что цвет заглушек выглядит более тусклым по сравнению с другими браузерами. На картинке, приведенной ниже, слева показан Firefox 43 , а справа — Chrome 47 :

    Так происходит потому, что по умолчанию все «заглушки » в Firefox получают дополнительное значение прозрачности. Чтобы избавиться от этого эффекта, нам понадобится следующая строка кода:

    Попробуйте открыть это демо в браузере Firefox .

    Поддержка стилей

    Псевдоэлемент поддерживает следующие свойства:

    • font properties ;
    • color ;
    • background properties ;
    • word-spacing ;
    • letter-spacing ;
    • text-decoration ;
    • vertical-align ;
    • text-transform ;
    • line-height ;
    • text-indent ;
    • opacity ;

    Дополнительные ресурсы

    Документация MDN
    Документация IE
    Развёрнутая статья на блоге Treehouse

    Атрибут placeholder используется для создания подсказок внутри пустых полей ввода (теги и Отправить Отмена

    Текст placeholder в Contact Form 7

    Решил посвятить еще несколько постов плагину WordPress для создания форм обратной связи — Contact Form 7. Сегодня поговорим о тексте подсказке contact form 7 placeholder и о том как задать цвет этого текста.

    Как добавить Contact Form 7 placeholder

    Нет ничего проще чем установить текст подсказку у CF7. Для этого нам нужно зайти в админку ваш_сайт/wp-admin/admin.php?page=wpcf7 создать контактную форму обратная связь WordPress, после чего вы увидите:

    Нажать на вкладку text или textarea и установить галочку напротив «Use this text as the placeholder of the field» как показанно на рисунке:

    Текст подсказка placeholder для textarea делается аналогично, смотрите рисунок:

    Окончательный вид нашей формы будет иметь вот такой вид в редакторе Вордпресс:

    Вроде все, Contact Form 7 и placeholder для текстовых полей готов, но не тут то было, если внимательно присмотреться к результатам, то мы увиим что текст подсказка немного светлее или прозрачней чем вводимый текст в форму. На рисунке этот момент прилично заметный.

    Дальше я раскажу вам как избавится от этой проблемы.

    Проблема с contact form 7 placeholder color

    Сразу наверное стоит оговорится, что эта проблема бывает не только в CF7 — эта проблема стилей всех текстов подсказок. А раз эта проблема в стилях, то и править нужно стили. Если у вас нет больше никаких текстовых полей вы смело можете написать вот такой CSS код в свои стили:

    Вот такими простыми правками стилей мы можем избавиться от разных цветов вводимого сообщения и текста подсказки.

    На этом все, теперь если вам нужно указать placeholder и color для contact form 7 вы знаете как это сделать. Советую также прочесть статью contact form 7 дополнительные настройки у нас на сайте.

    Для тех кто ненавидит плагины у нас есть пост обратная связь WordPress без плагина, где описанная пошаговая инструкция создания контактной формы.

    Иноформацию более в структурированном виде можно просмотреть в статье форма обратной связи wordpress.

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