Can I use CSS to have numbers be different colors depending on their value?

(I am testing on this Form https://www.jotform.com/build/250844719524058 )

We have a form for medical care and one of our fields is a configurable list where we keep track of heart rate, respiratory rate, blood pressure, temperature, and oxygen levels.

Even though we want out medics to input the correct information, we need them to also log numbers outside of the range in case there is a medical emergency. So for example the heart rate, should be between 60 and 100.

So is it possible to have every number between 60 and 100 be green, every number between 40-59 and 101-120 in yellow, and 0-39 and 121-150 in red?

Hi Edwin,

Thanks for reaching out to Jotform Support. I understand what you’d like to do, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Hello,

Yes, please. Take your time!

Looking forward to your answer.

Hi Edwin,

Unfortunately, CSS alone cannot evaluate numerical ranges dynamically, like what we wanted to do here. We will need to assign classes or use JavaScript to dynamically apply the appropriate classes based on the number's value. Here's an example using classes:

/* Numbers between 60 and 100 */

.number-green {

  color: green;

}

/* Numbers between 40-59 and 101-120 */

.number-yellow {

  color: yellow;

}

/* Numbers between 0-39 and 121-150 */

.number-red {

  color: red;

}

To apply this dynamically, you would need JavaScript to assign these classes based on the number's value. And, to be able to inject JavaScript on your form, you will need to use the full source code embed of the form. Here's the breakdown of the main requirements for this to work:

1. HTML: The form full source code. Either embedding the form using the source code, or hosting the form on your own website using the full source code.
2. CSS: Either using a separate file for the CSS or just use the normal injected custom CSS in the form.
3. JavaScript: A separate file for the JavaScript functions.

This will dynamically color the numbers based on their value. You can view and example in jsfiddle. Check out the screenshot below.

If you have the resource to host the form on your website, and would like to try to apply this solution, let us know.

Reach out again if you need any other help.

Interesting solution!

I was thinking, would it be possible to assign the color to numbers and create the range from there? For example can I assign red to the numbers 1, 2, 3, 4, 5, 6, 7, 131, 132, 133, 134, 135? Then repeat the same process for the numbers in my range.

If it is possible to have specific values have a color coating, that would be the goal. My main objective is to see if it's possible to aid visually our medical personnel on detecting values that might be outside of the scale.

Hi Edwin,

Yes, this is possible. The JavaScript + CSS below can do this.

//Assign red to the numbers 1, 2, 3, 4, 5, 6, 7, 131, 132, 133, 134, 135? 



<script>

      // Select all number elements

      const numbers = document.querySelectorAll("#numbers span")

      numbers.forEach((number) => {

        const value = parseInt(number.getAttribute("data-value"), 10)

        if (value >= 60 && value <= 100) {

          number.classList.add("number-green")

        } else if (

          (value >= 40 && value <= 59) ||

          (value >= 101 && value <= 120)

        ) {

          number.classList.add("number-yellow")

        } else if (

          (value >= 1 && value <= 7) ||

          (value >= 131 && value <= 135)

        ) {

          number.classList.add("number-red")

        }

      })

    </script>

/* CSS codes



/* Numbers between 60 and 100 */

.number-green {

  color: green;

}

/* Numbers between 40-59 and 101-120 */

.number-yellow {

  color: yellow;

}

/* Numbers between 1-7 and 131-135 */

.number-red {

  color: red;

}

Here's the screenshot result from the updated jsfiddle test.

Let us know if you need any more help.

Okok, thanks you so much!

And just to be sure, this will work only if I embed the form and not by just a user filling out the form?

Hi Edwin,

Yes, by embedding the form and including the JavaScript and CSS, the color-coding will work as intended.

Let us know if you have any other questions.

Hello,

This is powerful! I can't wait to implement it. However, I have another question regarding CSS:

What can I achieve without having to embed the form? The main use we are giving to this widget is to track vitals. I was thinking of changing the colors to help with the users find when values are outside of a range.

Is there anything I can use CSS to achieve something similar? maybe a prompt shows up saying "hey! check your numbers" when a number in one of the fields is outside of regular range.

Just in case, this is the link to the form I need it for: https://form.jotform.com/241063758284158

Hi Edwin,

CSS is primarily a styling language and does not have the capability to manipulate or perform calculations on data. To perform calculations on input values (data), you would need to use a scripting language like JavaScript. JavaScript can access the values entered into input fields and perform calculations on them. Since we need JavaScript, and JavaScript is possible only when using the form full source code embed, the solution I suggested here is not feasible in this case.

I understand what you’d like to do, and why you'd prefer to use CSS only instead of full scale form development. In theory, I think a workaround is possible, but using a different element, not the configurable list widget. If you can give me time (a day or 2), I can further research on this and present to you a demo form to evaluate.

In the meantime, let us know if you have any other questions.

Yes, I am open for any suggestions!

Hi Edwin,

You can check out the demo form here. I still went with the source code embed method because I found it to be the best, and easiest way. I'll walk you through setting this up:

1. Build the form. For this demo, this is the form. I used the Fill in the Blank element for the input fields (Vitals). I used a basic element, i.e., FITB because widgets, like the configurable list, are not available in the form source code embed.

2. Injected the following CSS codes in the form using the Form Designer.

/* Numbers between 60 and 100 */

.number-green {

    color: green;

    font-weight: bold;

}



/* Numbers between 40-59 and 101-120 */

.number-yellow {

    color: yellow;

    font-weight: bold;

}



/* Numbers between 1-7 and 131-135 */

.number-red {

    color: red;

    font-weight: bold;

}

3. Publish the form using the source code embed method.

4. Before you embed the source code, add the JavaScript codes to the form source code.

<!-- javascript to change color of input fields based on value ranges -->



        <script>

            document.getElementById('851_shorttext-1').addEventListener('input', function () {

                // Get the input value and convert to number

                const value = parseInt(this.value);

                // Remove any existing color classes

                this.classList.remove('number-green', 'number-yellow', 'number-red');

                // Apply appropriate class based on value ranges

                if (value >= 60 && value <= 100) {

                    this.classList.add('number-green');

                } else if ((value >= 40 && value <= 59) || (value >= 101 && value <= 120)) {

                    this.classList.add('number-yellow');

                } else if ((value >= 1 && value <= 7) || (value >= 131 && value <= 135)) {

                    this.classList.add('number-red');

                }

            });

        </script>

For now, the script only target Vitals/HR input field. This can be easily adjusted once you have completed the form that you want to implement for this. You can check out the screencast below that shows how it works.

That's it. Let us know if you have any other questions.