И как заставить CSS реагировать на <input type="email" required>, когда

пользователь туда что-то ввёл?

input:valid например реагирует на ввод пользователя у <input type="text" required>

https://stackoverflow.com/questions/5601647/html5-email-input-pattern-attribute

Что значит заставить CSS реагировать? CSS ни на что не "реагирует". А псевдокласс :valid очень даже работает и с тектовым инпутом и инпутом с типом email просто у них правила валидации разные

Можешь такой костыль накатить input:not(:focus):valid, когда не в фокусе сработает валид/инвалид, а стилизовать required можно через :required

Да, но срабатывает когда не в фокусе. А нужно чтобы срабатывало моментально..

Пропищи :focus:valid еще тоже 😁

А исходя из задания тут нужно прикрутить валидацию формы перед отправкой, тем более с валидацией по email с пустой строкой тут required тут нафиг не нужон

В этом и проблема возникает, что правила валидации у них разные, мне бы хотелось чтобы email в моём сценарии валидовался как text

Мне нужно скрывать placeholder

Нужно скрывать placeholder формы input. Он у меня выполнен в отдельном теге.

Очень экстравагантное решение. Ну в этом случае можно использовать input:focus + .placeholder,

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

а ты не скрывай пока не появится символ

А в чем проблема на жс это все сделать, ничего сложного ведь

Та ёмаё, как это сделать то с email? Для text типов можно через :valid такое провернуть

Ничего, я уже сделал, но я стараюсь избегать JavaScript если это можно реализовать на чистом HTML5

Потому что для text другое правило валидации

https://codepen.io/Bedolaga/pen/JjwKoQE а почему не такое юзаешь, например? Я не понял просто момента с плэйсхолдер в отдельном элементе

Как по мне это ненужная трата времени, особенно если вы так долго на этом сидите...

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

Вот именно

А зачем на месте сидеть только js?надо вперед двигаться в js и тд

Email я делал

Конкретно с отдельным .placeholder?

И кстати да, похоже это работает только в WebKit

<input type="email" placeholde r=" valid email address" class="input-field" />

А как же псевдокласс ::placeholder чем он вас не устраивает?

Что-то пробовал, но как окрашивать звёздочку через него — я не понял.

<input type="email" placeholder="Enter a valid email address" class="input-field" />

ФСМЫСЛЕ? ::placeholder { color: red; }

Это окрашивает ВЕСЬ текст, а я ещё раз говорю, нужно окрашивать только * в конце предложения

Вот тут видно

хех

Дак я по макету делаю, не сойдёт такое.

Градиентом 😁

Тогда в js

Да вы мазохист

Фиговый вариант

https://stackoverflow.com/questions/35683601/change-color-for-one-part-of-placeholder

сработает префиксы просто убери и сработает

Префиксы не надо убирать для поддержки сафари и других браузеров, но добавить еще одно правило для ::placeholder надо

Может я такой дурак, но не работает.. https://codepen.io/darkvessel/pen/GRPqJpB

Не так убери )

Ты к инпуту применил, надо к плэйсхолдеру

жаль конечно попробуй так https://stackoverflow.com/questions/22655493/how-can-i-style-individual-parts-of-an-input-placeholder

Примерно так и реализовал

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