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

Question

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>

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 3, 2017 at 13:45

MHD Alaa Alhaj

3,2361 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sc28 Over a year ago

Thanks for the hints! You're correct, the .change wouldn't work on the spinner, but I found in this answer that another event could be used: .on("spinstop",...). See the updated JSfiddle for a final working solution (i.e. conditional formatting on spinner input's value). If you update your answer with the new change event I can mark it as accepted.

MHD Alaa Alhaj Over a year ago

Well done! you are most welcome and btw I have updated the answer.

Quentin · Accepted Answer · 2017-12-03 13:19:43Z

1

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.

answered Dec 3, 2017 at 13:19

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Update

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related