Псевдокласс :invalid

Здравствуйте.

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

Вот пример: http://jsfiddle.net/gpbtwu99/

HTML

<form>
   <p>Адрес сайта</p>
   <p><input type="url" required></p>
   <p>Адрес электронной почты</p>
   <p><input type="email" required></p>
   <p><input type="submit" value="Отправить" /></p>
</form>

CSS

input:invalid {
 background: #fdd; /* Красный цвет фона */
}
input:valid {
 background: #dfd; /* Зеленый цвет фона */
}