You are viewing limited content. For full access, please sign in.

Question

Question

Change single-field input background color

asked on February 1, 2022

I have a single field that is read only that will dynamically fill "High", "Medium", or "Low" based on another field.  If this field is "High" I want the background of the field itself to change to red, Medium - orange, and Low - green.  How can I do this with css and/or JavaScript?

 

0 0

Answer

SELECTED ANSWER
replied on February 1, 2022 Show version history

Here's some CSS and Javascript.  This assumes your fields have CSS Class of: LowMediumOrHigh.

 

CSS:

/*Applying the classes to input elements covers the active fields, but in order to impact the disabled 
fields we need to override the default coloring of the input[readonly] and input[backend-readonly] elements*/
.redBackground input, .redBackground input[readonly], .redBackground input[backend-readonly] {background-color : #FF8889!important;}
.orangeBackground input, .orangeBackground input[readonly], .orangeBackground input[backend-readonly]  {background-color: #FFD580!important;}
.greenBackground input, .greenBackground input[readonly], .greenBackground input[backend-readonly]  {background-color: #90EE90!important;}

 

Javascript: 

$(document).ready(function () {

  //When the form first loads, or when a field with the LowMediumOrHigh class is changed,
  //then call the LowMediumOrHighChange() function.
  LowMediumOrHighChange();
  $('.LowMediumOrHigh').change(LowMediumOrHighChange);
  
  //When this function is called, the coloring of the field background is changed based on the values.
  function LowMediumOrHighChange()
  {
    $('.LowMediumOrHigh').each(function() {
      $(this).removeClass('redBackground');
      $(this).removeClass('orangeBackground');
      $(this).removeClass('greenBackground');
      if($(this).find('input').val() == 'HIGH')
      {
        $(this).addClass('redBackground');
      }
      else if($(this).find('input').val() == 'MEDIUM')
      {
        $(this).addClass('orangeBackground');
      }
      else if($(this).find('input').val() == 'LOW')
      {
        $(this).addClass('greenBackground');
      }
    });
  }

});

 

2 0
replied on February 2, 2022

Thank you.  I'll give this a whirl.

0 0
replied on February 2, 2022

You are awesome!  This works PERFECTLY!  Thank you again.

 

1 0
replied on February 2, 2022

Fantastic!

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.