Как изменить текст placeholder css

Простой input по умолчанию без ничего:

Давайте его выведем прямо здесь, как видим внутри input пустота, т.е. никакого текста нет.

Вставляем текст внутрь input

Для того, чтобы у вас появился «текст внутри input» вам понадобится атрибут » «

Вставляем его внутрь тега input с каким то текстом:

placeholder=»Текст внутри input»

Код input с текстом внутри:

Пример вывода текста внутри input

Теперь давайте выведем пример кода тега input с текстом внутри:

Как удалить текст внутри input

Конечно же самый простой вариант удаления текста внутри input — это удаление » » со значением.
Но. Представим такую невероятную ситуацию, что у вас нет доступа к input(вопрос — такая система?) мы можем отключить текст внутри? для этого вам понадобится:

Выше я использовал input с текстом внутри.

Добавим ему какой-то класс с произвольным значением:

class=»no_text_into_input»

Наш input получится:

Далее. нам потребуются некие стили(opacity), которые отключат текст внутри input

Текст в input и textarea по умолчанию или замещающий текст. Placeholder.

Как часто нам приходится реализовывать замещающий текст (текст в поле ввода, который исчезает при фокусировке) для полей ввода? Да, практически, в каждом проекте. Чаще всего это бремя ложилось на JavaScript события onFocus и onBlur. Но с приходом и быстрым распространением HTML 5 объемы кода для реализации замещающего текста сводится к минимуму.

Это происходит благодаря новому атрибуту placeholder у и .

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

Но, как известно, в семье не без урода. IE не поддерживает вплоть по 9 версию. Opera и Safari – только последние версии. Для этого случая нам, как и обычно, приходится мудрить с JavaScript. Для начала напишем функцию, которая сможет проверить, можем ли мы в текущем браузере использовать атрибут placeholder для полей ввода:

function supportsAttribute(element, attribute) < var new_element = document.createElement(element); if (attribute in new_element) < return true; >else < return false; >>;

Теперь, используя её и любимый jQuery реализуем кроссбраузерный замещающий текст на примере :

if (!supportsAttribute(‘textarea’, ‘placeholder’)) < $("#input") .data("text", $("#input").text()) .css("color", "#ccc") .focus(function() < var $el = $(this); if (this.value == $el.data("text")) < this.value = ""; >>) .blur(function() < if (this.value == "") < this.value = $(this).data("text"); >>); > else

Отсюда не сложно понять как сделать это для .

Хочу обрадовать, что есть способ реализовать placeholder еще быстрее и проще. Можно просто воспользоваться jQuery плагином Placeholder =)

UPD: placeholder аттрибут давно является стандартом. Статья устарела.

Категорії HTML, Верстка Позначки HTML5, input, javascript, jQuery, placeholder, textarea

Підручник Swift

Що таке Swift
Swift: Базові поняття
Swift: Константи і Змінні
Swift: Типові анотації
Swift: Назви констант та змінних
Swift: Друкування констант та змінних
Swift: Коментарі та крапка з комою
Swift: Цілі числа

Как поменять цвет у placeholder css

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

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

Пример 1. Использование placeholder

HTML5 CSS 2.1 IE Cr Op Sa Fx

Для изменения цвета текста в атрибуте placeholder в Firefox применяется псевдокласс ::-moz-placeholder .

В Safari и Chrome стиль текста меняется следующим образом.

Таким образом, соединяя воедино этот стиль, получим страницу, одинаково работающую в браузерах Firefox, Safari и Chrome (пример 2).

Пример 2. Цвет текста

HTML5 CSS3 IE Cr Op Sa Fx

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

Теперь что касается других браузеров. Internet Explorer вообще не понимает атрибут placeholder и отказывается с ним что-либо делать, а Opera не умеет менять цвет текста через стили. Так что приведённый трюк работает только в Firefox, Safari и Chrome.

::placeholder

В ::placeholder можно использовать только те CSS-свойства, которые разрешены в псевдоэлементе ::first-line .

Note: В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светло-серый текст.

Синтаксис

Примеры

Красный текст

Результат

Зелёный текст

Результат

Проблемы доступности

Цветовой контраст

Контрастность

Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.

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

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

Использование

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

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

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

Режим высокой контрастности Windows

Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в режиме высокой контрастности Windows (en-US). Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.

Метки

Placeholder не является заменой элемента . Без метки, которая программно связывается с формой с помощью for и id атрибутов, такие программы, как скринридеры не смогут анализировать элементы .

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

Многие из вас нередко сталкивались с формами, где в качестве подсказок есть подписи. Они пропадают при на наборе текста. Так вот — это атрибут placeholder, который есть у элементов, которые созданы для ввода текста (input). С помощью него можно задать текст, который будет отображаться как подсказка до начала ввода в данное поле. К сожалению, не все браузеры одинаково корректно работают с данным атрибутом. Устаревшие версии и вовсе данный текст не отображают.

Напомню, по статистике в Рунете устаревшими браузерами пользуется около 5% пользователей (это для очистки совести, если что). Надеюсь на ваших сайтах они не концентрируются)

Теперь рассмотрим как сделать так, чтобы решить нижеописанные проблемы:

1. Как изменить стили для плейсхолдера;
2. Как скрыть текст плейсхолдера не при вводе, а уже при нажатии на поле;
3. Что делать с браузерами, где в принципе не отображается placeholder.

Во всех примерах будем работать с полем input.

Как изменить цвет текста-подсказки в placeholder в input?

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

По умолчанию во многих браузерах цвет подсказки — серый. В данном примере сделаем его чёрным.

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

И да, можно использовать для указания этих свойств классы. Смотрим ниже:

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

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

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

А что делать с бразуерами, которые не поддерживают атрибут placeholder в input?

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

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

Подключаем его. Не стоит забывать, что нужен ещё и в принципе jquery подключить.

Стилизуем Placeholder с помощью CSS

Используйте псевдоэлемент ::placeholder для стилизации дефолтного текста в элементе input или textarea . Большинство современных браузеров поддерживают это, но для старых браузеров требуются префиксы.

Префиксы

Используемый мной синтаксис поддерживается большинством современных браузеров:

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

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

Псевдоэлемент против псевдокласса

Вы можете заметить, что я использую двойное двоеточие :: . Это называется псевдоэлементом и было введено в CSS3. Если бы мы использовали одно двоеточие : , это назвали бы псевдоклассом.

Поскольку псевдоэлемент, :: был представлен в CSS3, а не в более ранних версиях CSS, некоторые старые браузеры, такие как Internet Explorer, просто никогда не поддерживали его. Принимая во внимание, что псевдокласс, : был представлен ранее (в CSS1 и CSS2). Вот почему гораздо больше браузеров, включая Internet Explorer, поддерживают его.

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

Непрозрачность Placeholder в Firefox по умолчанию

Хорошо, с чем это связано opacity: 1 для Firefox. Это потому, что по умолчанию для placeholder Firefox применяется значение непрозрачности. Таким образом, чтобы переопределить это, мы должны установить его принудительно. Таким образом, наш placeholder будет отображаться и не будет иметь блеклого внешнего вида по умолчанию.

CSS-обработка неверных селекторов

Таким образом, вы также можете подумать, почему мы не просто сгруппировали все префиксы вендоров вместе как в примере ниже:

Ну, это потому, что в CSS3 было правило, которое гласит:

группа селекторов, содержащая недопустимый селектор, недействительна.

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

Так что в нашем HTML это будет выглядеть как ожидалось

Но что произойдет, если мы добавим неверный селектор CSS

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

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

⭐️ НО! похоже, это можно изменить в CSS4.

Как правило, если в цепочке или группе селекторов присутствует недопустимый псевдоэлемент или псевдокласс, весь список селекторов является недействительным. Если псевдоэлемент (но не псевдокласс) имеет префикс -webkit-, то по состоянию на Firefox 63 браузеры Blink, Webkit и Gecko предполагают, что он действителен, не аннулирует список выбора.

Подробнее об этом читайте в статье Криса Койера «Один неверный псевдо-селектор равен целому игнорируемому селектору»

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

Вот список всех стилей, которые вы можете применить к вашему placeholder:

background свойства
color
font свойства
letter-spacing
line-height
opacity
text-decoration
text-indent
text-transform
vertical-align
word-spacing

Проблемы доступности

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

Вот действительно потрясающая статья о том, как использовать заполнители без каких-либо меток. Ниже приведены три основных тезиса:

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

Автоматически добавлять Vendor-префиксы

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

Похожие публикации:

Зачем используется реле с контроллером arduino
Как блок схемой и на алгоритмическом языке представляется команда цикла с предусловием
Как сделать скругленные углы в css
Как сделать стрелочку в css

Как убрать placeholder при фокусе

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

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

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

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

Как избавиться от placeholder при фокусе?

Давайте разберемся, что такое placeholder. Placeholder — это текстовое сообщение, которое появляется внутри поля ввода веб-формы или приложения в качестве подсказки для пользователя. Он отображается в поле, пока пользователь не начнет вводить свои данные.

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

Есть несколько способов, чтобы убрать placeholder при фокусе на поле ввода. Но самый простой способ это использовать JavaScript.

Пример кода для скрытия placeholder при фокусе на поле ввода:

Читать далее«title»: Что делать после шпаклевки стен: этапы и рекомендации.

В данном примере, при фокусировке на поле ввода, placeholder изменяется на пустую строку. И когда поле теряет фокус, placeholder снова появляется.

Вы также можете добавить CSS, чтобы изменить цвет текста placeholder, чтобы он соответствовал цвету текста на заднем плане.

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

Что такое placeholder и причины его использования

Placeholder (заполнитель) – это текст, который появляется внутри поля ввода до того момента, пока пользователь не начнет вводить свои данные. Обычно такой текст написан светлым цветом и содержит подсказку о том, что именно нужно вписать в это поле. Например, в поле для ввода номера телефона может быть написано «Введите номер телефона».

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

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

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

Почему стоит убрать placeholder при фокусе

Читать далее«Арбуз кримсон руби F1: отзывы, сроки и правила посадки».

Placeholder – это простое средство разметки форм, которое позволяет сообщить пользователю, что должно быть введено в конкретное поле. Хотя они упрощают разработку, они иногда могут быть назойливыми и мешать пользователям. Один из способов улучшить пользовательский опыт заключается в том, чтобы скрыть placeholder, когда пользователь начинает вводить текст.

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

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

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

Как использовать «label» вместо placeholder

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

Вместо использования placeholder, можно использовать тег «label». Тег «label» — это элемент, который ассоциирует текст и поле ввода. Это может быть полезно для улучшения доступности и понимания контента пользователем.

Для использования тега «label» необходимо задать атрибут «for», который указывает ID элемента, с которым связан текст «label». Например:

В данном примере текст «Имя пользователя:» связан с полем ввода, имеющим ID «username». Когда пользователь нажимает на текст «Имя пользователя:», фокус переходит на поле ввода.

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

Таким образом, текст «Имя пользователя:» будет являться лейблом для поля ввода.

Использование тега «label» позволяет улучшить доступность и удобство использования формы для пользователей, особенно для людей с ограниченными возможностями.

Как использовать «data-» атрибуты вместо placeholder

Placeholder — это текстовая подсказка, которая появляется внутри поля ввода, когда оно пустое. Но как убрать placeholder при фокусе и использовать вместо него «data-» атрибуты?

«Data-» атрибуты также могут использоваться для предоставления подсказок пользователю, но их можно настроить гораздо более гибко, чем простой placeholder. «Data-» атрибуты могут хранить более сложную информацию, такую как подробное описание вводимых данных, а также подсказки для пользователей с ограниченной зрительной функцией.

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

data-text: это атрибут, который задает текстовую подсказку для поля ввода данных;
data-description: этот атрибут задает подробное описание того, какие данные нужно вводить;
data-placeholder: этот атрибут обеспечивает более гибкий подход к заданию placeholder, чем стандартная функция;
data-value: данный атрибут может использоваться для установки значения поля ввода прямо из HTML.

Чтобы получить доступ к этим атрибутам, можно использовать JavaScript или jQuery. Например, это можно сделать с помощью метода data(), который позволяет получить или установить значения атрибутов «data-«.

Таким образом, использование «data-» атрибутов вместо placeholder более гибкое и позволяет более детально настроить подсказки для пользователей. Кроме того, вы можете использовать их для хранения мета-информации на страницах и облегчения доступа к этой информации с помощью JavaScript или jQuery.

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

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

Для использования таких плагинов, необходимо подключить библиотеки jQuery и сам плагин. Далее, добавляем класс для инпута, у которого нужно скрыть placeholder. Например, .no-placeholder.

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

onfocusout: function (event)

var placeholder = $(event.currentTarget).attr(‘placeholder’);

onfocusin: function (event)

В данном примере плагин под названием inputmask скрывает placeholder при фокусировке на инпуте. Далее, при снятии фокуса, он восстанавливает его стандартное значение. Для этого, мы используем функции onfocusout и onfocusin.

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

Как сделать анимацию при убирании placeholder при фокусе

Некоторые веб-сайты используют интересные анимации при вводе данных пользователем. Один из способов этого достичь — изменить статический placeholder в анимированный текст, который исчезает, когда пользователь начинает вводить текст.

Для этого можно использовать CSS и JavaScript. Первым делом необходимо создать HTML-форму с инпутом. Затем, используя CSS, задать стили статическому placeholder’у. Например, можно добавить эффект размытия, изменить цвет шрифта и задать другие параметры оформления.

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

Кроме того, можно добавить эффект появления и исчезновения label при заполнении формы. Задать для label параметр visibility: hidden, а при заполнении формы скриптом, изменять его на visible.

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

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

Как протестировать убирание placeholder при фокусе

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

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

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

Видео по теме:

Как убрать placeholder при фокусе на input?

Чтобы скрыть placeholder при фокусе, нужно использовать JavaScript. Например, можно добавить обработчик onFocus на input и в этом обработчике установить пустое значение атрибута placeholder.

Можно ли убрать placeholder без использования JavaScript?

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

Как скрыть placeholder для конкретного input?

Для конкретного input можно использовать атрибут placeholder=»». Также можно использовать JavaScript и обращаться к input по его id или class, чтобы установить пустое значение атрибута placeholder.

Можно ли изменить внешний вид placeholder?

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

Как сделать placeholder анимированным?

Для анимации placeholder можно использовать CSS. Например, можно плавно изменять цвет или прозрачность при фокусе на input с помощью псевдокласса ::placeholder и transition.

Какие браузеры поддерживают изменение внешнего вида placeholder в CSS?

Большинство современных браузеров поддерживают изменение внешнего вида placeholder в CSS, в том числе Chrome, Firefox, Safari, Opera и Edge. Однако, старые версии IE не поддерживают эту возможность.

Как изменить текст placeholder css