CSS для рисования обязательного поля, пока он пуст

Question

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

Это пример того, что я пробовал:

CSS

input[type="text"]{ 
    display:block; 
} 
input.required[value=""] { 
    background-color:yellow; 
} 

HTML

Name:<input class="required" type="text" name="Name" value="" size="20"> 
Phone:<input type="text" name="Phone" value="" size="20"> 

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

Есть ли способ заставить его работать с чистым CSS?

Answer 1

С новыми браузерами: используйте psedo-селектор :invalid и атрибут required. В старых браузерах вам понадобится JavaScript.

Если ваш фреймворк мешает добавить атрибут HTML5, я бы поставил под вопрос структуру (или посмотрел на обновление версии), но вы всегда можете использовать прокладку, если необходимо, с чем-то рядом (предположим, что jQuery):

$(function() { 
    $(".required.").attr("required", "true"); 
}); 

Меньше, чем идеальный, но достаточно простой, чтобы он не загрязнял систему.