Awesome! I spent a few hours trying different things and I'm not sure I would have gotten that!

This is one of those situations where you really want to use your browser's "Inspect Element" feature to see the CSS rules affecting a particular element. Firefox and Chrome are both excellent for this.
 

Hi Eric,

I would like to format the same read only field, but based on a condition. So I've been trying to get this to work, but obviously I must be using the wrong "selector" in my JQuery. I get the below results with the following code:

$(this).find('.result input').val(subResult)
   if (subResult < 0) 
   {
      $(this).find('.result').css('background-color', '#f76e6e');
   }

This changes the background color as below whenever the value is negative.

I want the grey background of these readonly fields in my table to be red, not the "cell" background or the way it's being displayed here.

If I change the code to below by specifying "input" then I can change the text color etc. I just don't know what to change "input" into to get what I want.

$(this).find('.result input').css('color', '#f76e6e');

Thanks

Sheldon

Are you just trying to turn the box red when the value is negative (below 0) ?

What I did:

create a css for your result class, but I didnt use a class for that field I just selected the element.

#q2 input[readonly] {

     background-color:purple !important;
     color:white;

}

Then in js:

$(document).ready(function () {
  
  $('#q2 input').blur(function () {
      
    	$('#q2 input').attr('readonly','True') ; 
    
  });
  
});

Now whenever the box is changed, it is set to read only and uses the css for that element when its read only. Which in this case, the background is set to purple and the text color is set to white.

Is this what you are trying to achieve?

Hi Josh,

Thanks for the info. It's not quite what I'm after though. The field is permanently readonly when the form loads. Some calculations are performed in JS and then based on the results I want the grey background of the field to change to red. I'm just not sure what setting/property to use to refer to that specific background. Basically, as you put it, turn the box red when negative.

Thanks

Sheldon

So the information that will be in that field isnt necessarily calculated when the form loads right?

The information should be calculated as the form loads.

What you're asking may not be possible with JavaScript.

The CSS rule that Forms uses to change the background color of read-only input boxes is very specific and overrides other styles. You can't use jQuery to change the background color because jQuery doesn't let you specify the !important CSS declaration.

Eric,

I'm trying to do something similar, in that I want to form to load and have the read-only fields be a different color.  Is there something different I need to change to your CSS above to apply this to a text field??  I've tried the following:

.ro input [readonly] {background-color: purple !important;}

.ro is the class name for the fields I would like to change color.  I am not getting any change to these fields.  Note: I do not have any calculations or anything as Josh mentioned above.  

Thanks,

Nate

There shouldn't be a space between input and [readonly]. Use

.ro input[readonly] {background-color: purple !important;}

This is way after the fact (2 1/2 years).  But this helped me, so it may help others too.  The post by @████████ on July 7, 2014 in response to @████████indicates that it may not be possible to change the background color of select read-only fields via Javascript.  It actually is possible.

You just need to create a special CSS class for it, and then assign the class to the fields via Javascript.

CSS looks like this (which designates purple background for any readonly input fields with the CSS Class of readOnlyPurple:     

.readOnlyPurple input[readonly] {background-color: purple !important;}

Along with Javascript like this (to add or remove the class on a particular field):     

$('#q40').addClass('readOnlyPurple');
$('#q40').removeClass('readOnlyPurple');

@Matthew Tingey, I have tried this and it does not work for me. The only thing I have different is the q15

What type of field are you using @████████?  Is it a Single Line field, a Multi-line field, or something different?

Can you share the exact code you used?

Hi Matthew

Here is what I used.

CSS.

.whiteinput {background-color: white !important}

JS

$(document).ready(function () {
  $('.Read_Only input').attr('readonly', true);
  $('.Read_Only input').addClass('whiteinput');
});

With 'Read_Only' added to the fields CSS section. I also tried it with

$(document).ready(function () {
  $('#q15 input').attr('readonly', true);
  $('#q15 input').addClass('whiteinput');
});

Thanks