Инструменты Node.js для сбора и анализа метрик и статистики бизнеса

Вот кросс-браузерное решение, которое не использует Javascript:

Live demo

Встроенные элементы, такие как input, не поддерживают :before и :after. Чтобы сделать вещи еще сложнее, селектор компоновщиков и их псевдоклассы не полностью поддерживаются всеми браузерами, как вы узнали.

Итак, обходным путем является добавление label, размещенного относительно поверх поле ввода с атрибутом for, указывающим на входное текстовое поле. Таким образом, когда пользователь нажимает метку (фальшивый заполнитель), фокус переходит в поле ввода.

Замените ваш class="required" на атрибут required="required". Это дает вам возможность использовать селектор : недействительный и : действительный .

    
    Name
    

    
    

    


input {
    width: 160px;
}

input[type=submit] {
    width: auto;
}

input[required] + label {
    color: #999;
    font-family: Arial;
    font-size: .8em;
    position: relative;
    left: -166px; /* the negative of the input width */
}

input[required] + label:after {
    content:'*';
    color: red;
}

/* show the placeholder when input has no content (no content = invalid) */
input[required]:invalid + label {
    display: inline-block;
}

/* hide the placeholder when input has some text typed in */
input[required]:valid + label{
    display: none;
}

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

Я также поменял ваш адрес электронной почты с type="text" на type="email" для лучшего удобства пользователей на мобильных устройствах.