label{font-family: Verdana, sans-serif;font-size: 14px;}

/* inputs desabilitados ficarão com fundo  
   vermelho e bordas pretas*/
input:disabled{
  background-color: red;
  border: 1px solid #000;
}

/* o input com id #ex2 que estiver habilitado 
   ficaá com cor de fundo amarela e letras pretas */
input#ex2:enabled{
  background-color: yellow;
  color: #000;
}

/* o input com o id #ex3 que estiver com foco do usuario 
   ficará com uma borda de 2px azul*/
input#ex3:focus{
  border: 2px solid blue;
}

/* o input com id #ex4 com conteudo invalido 
   terá uma borda vermelha */
input#ex4:invalid{
  border-color: red;
}
/* o input com id #ex5 valido ficará com fundo 
   verde e letras brancas */
input#ex5:valid{
  background-color: green;
  color: #fff;
}

/* o input que estiver dentro do range irá ter 
   borda verde */
input:in-range{
  border-color: green;
}

/* o input que estiver fora do range ficará com 
   fundo rosa */
input:out-of-range{
  background-color: pink;
}

/* o input com id #ex8 e que for opcional ficará 
   com fundo verde escuro e letras brancas */
input#ex8:optional{
  background-color: #003300;
  color: #fff;
}

/* o input que for obrigatório 
   ficará com fundo vermelho escuro e letras brancas */
input:required {
  background-color: #660000;
  color: #fff;
}

/* o input que estiver disponivel somente para leitura 
   ficará com fundo cinza e borda cinza escuro */
input:read-only{
  background: #e3e3e3;
  border: 1px solid #666;
}

/* o input com id #ex11 e disponivel para edição sem a tag
   readonly ficará com fundo laranja e letras brancas*/
input#ex11:read-write{
  background: #ff3300;
  color: #fff;
}