CODEWITHSUNDEEP
htmlcssjquery-ui
sc28
sc28

Reputation: 1213

Conditional styling of an HTML <input> based on current value

I'm trying to customize the color of an <input> element based on it's current value.

So far I've tried solutions based on this question or this post, but can't get it to work even for a simple condition (e.g. "1<2"), and so even less based on the input's value (e.g. "value<2").

Here's a jsFiddle illustrating the problem, and my attempts below:

    <p>
Simple coloring
      <input autocomplete="off" id="spinner-twenty"  style="background-color:red" class="spinner-twenty" name="spinner" value="0.1">
    </p>

    <p>
Conditional coloring based on style condition
      <input autocomplete="off" id="spinner-twenty"  style="${1} < 2 ? 'background-color:red' : 'background-color:white'" class="spinner-twenty" name="spinner" value="0.1">
    </p>

    <p>
   Conditional coloring based on background-color condition

      <input autocomplete="off" id="spinner-twenty"  style="background-color:{!IF(1 < 4,'#7CFC00', '#FFA07A')}" class="spinner-twenty" name="spinner" value="0.1">
    </p>    

  Conditional coloring based on background-color condition (based on inputs "value")

      <input autocomplete="off" id="spinner-twenty"  style="background-color:{!IF(value < 4,'#7CFC00', '#FFA07A')}" class="spinner-twenty" name="spinner" value="0.1">
    </p>

Upvotes: 1

Views: 3669

Answers (2)

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3213

You could use jQuery .change function which will be triggered on input value change,

But in your case which you are using spinner when a value changed it add a new attribute to the input called aria-valuenow="" so you can't trigger on value change because there is .value() but no .aria-valuenow(),

So far I created new default input for testing and it worked greate, see the updated JSfiddle.

Update

You could use .on("spinstop",...), see the updated JSfiddle.

Upvotes: 1

Quentin
Quentin

Reputation: 943981

The resources you link to are describing server-side logic (two different kinds, neither of which you appear to be using). They determine what HTML should be output before it leaves the server.

Browsers do not support logic in style attributes.

To achieve this you will need to write some JavaScript. You could binding an Event Listener to the element that fires when there is an input event, reads the value property of the element and then sets the style.backgroundColor property.

Upvotes: 1

Related Questions