Vejam os exemplos abaixo. Eu estou tentando estilizar meu CSS através do value
que ele tem, mas não esta dando certo.
Montei 3 exemplos, um para que se o input
tiver o [value="red"]
ele deve ficar com uma borda vermelha. Porém mesmo vc digitando red
nele nada muda, e se ele já vier com o value definido como red
, mesmo vc apagando esse valor ele continua com a borda vermelha.
Também fiz um teste com o select, já deixando uma opção com o option[value="3"]
selecionada usando selected
o CSS tb não é aplicado...
Existe alguma forma de usar o value
que está no input e usa-lo como seletor para aplicar alguma classe apenas com CSS?
[value="red"] {
border: 2px solid red;
}
select > option[value="3"] {
border: 2px solid red;
}
Digite "red" nesse input e nada acontece<br>
<input type="text" value="" />
<br><br>
Esse input já está com o value=red e o CSS funcionou, <b>mas se eu apagar ele continua com o estilo!</b><br>
<input type="text" value="red" /><br><br>
Esse Select já está com o option de value=3 selecionado, mas nada acontece<br>
<select name="qa_contact">
<option value="1">opt 1</option>
<option value="2">opt 2</option>
<option value="3" selected="selected">opt 3</option>
</select>