7

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>

1

1 Resposta 1

6

É preciso diferenciar duas coisas no atributo value de um input:

  • o valor atual (o que você vê)
  • a propriedade do elemento (defaultValue)

Quando você define um valor ao atributo value, esse valor é adicionado à propriedade defaultValue que só pode ser alterada via JavaScript. Alterar o valor do campo, seja digitando ou pelo método .value do JavaScript, o defaultValue permanece o mesmo, e é essa referência para a qual o seletor do CSS aponta:

inserir a descrição da imagem aqui

A única forma de alterar o defaultValue é alterando o atributo do elemento no DOM:

function f(){
   var e = document.querySelector("input");
   e.setAttribute("value", e.value);
}
[value="red"] {
    border: 2px solid red;    
}
Digite "red" no input e clique no botão "OK":
<br>
<input type="text" value="">
<br>
<button onclick="f()">OK</button>

Ou seja, simplesmente digitando um novo valor no campo não altera seu atributo. Nem mesmo usando elemento.value = "red"; irá alterar a propriedade defaultValue.

No caso do select mencionado, devido a restrições visuais próprias do elemento option, não é possível atribuir-lhe uma borda (exceto quando o select for do tipo multiple, e não são todos os navegadores que suportam isso), mas ele aceita outras propriedades, como color ou background:

select > option[value="3"] {
    color: red;
}
<select name="qa_contact">
    <option value="1">opt 1</option>
    <option value="2">opt 2</option>
    <option value="3">opt 3</option>
</select>

Borda no option com select multiple (Chrome, Opera, Firefox, Edge):

select > option[value="3"] {
    border: 2px solid red;
}
<select name="qa_contact" multiple>
    <option value="1">opt 1</option>
    <option value="2">opt 2</option>
    <option value="3" selected="selected">opt 3</option>
</select>

1
  • 2
    Informações interessantes, pelo visto parece que apenas com CSS não seira possível no momento...
    – hugocsl
    Commented 10/12/2018 às 12:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .