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

Question

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

Navigation

#1 by (6 votes)

7

See the examples below. I'm trying to style my CSS through value that it has, but it's not working.

I've assembled 3 examples, one so that if input has [value="red"] it should have a red border. But even if you type red in it nothing changes, and if it already comes with the value set to red , even if you delete this value it continues with the red border.

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

Is there a way to use value in input and use it as a selector to apply some class 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>

html html5 css css3

asked by anonymous 10.12.2018 / 11:45

1 answer

What is the difference between ASC or DESC in clustered indexes? Double rule in LIMIT

score 6 · Accepted Answer

You need to differentiate two things in the value attribute of an input:

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

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

TheonlywaytochangedefaultValueistochangetheattributeoftheelementintheDOM:

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 typing a new value in the field does not change its attribute. Not even using elemento.value = "red"; will change the defaultValue property.

In the case of select mentioned, due to visual constraints specific to the option element, you can not assign it a border (except when the select is of type multiple , and not all browsers that support it ), but it does accept 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 in% with% with option (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>