Is it possible to use Input Value as the CSS selector?

Question

Look at the examples below. I’m trying to style my CSS through value that he has, but it’s not working.

I’ve put together three examples, one for input has the [value="red"] it should stick with a red border. But even you typing red nothing changes in it, and if it already comes with the value defined as red, even if you erase this value he continues with the red border.

I also did a test with select, already leaving an option with the option[value="3"] selected using selected tb CSS is not applied...

Is there any way to use the value who is in the input and use it as selector to apply some class only with 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>

Answer 1

Two things need to be distinguished in the attribute value of an input:

• the current value (what you see)
• property of the element (defaultValue)

When you set a value to the attribute value, this value is added to the property defaultValue which can only be changed via Javascript. Change the field value, either by typing or by the method .value of Javascript, the defaultValue remains the same, and it is this reference to which the CSS selector points:

The only way to change the defaultValue is by changing the attribute of the element in the 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>

That is, simply entering a new value in the field does not change its attribute. Not even using elemento.value = "red"; will change the property defaultValue.

In the case of select mentioned, due to visual restrictions of the element option, cannot assign an edge to it (except when select is of type multiple, and not all browsers support this), but it accepts other properties such as color or 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>

Edge on the option with 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>