Modify Font Color on a readOnly field

salvadormarchan
Kilo Guru

Hello All,

How do you modify the font color when the field is set to ReadOnly?

Out of the box, the background is grayed and the font is also grayed (slightly darker) when it's readOnly. I was asked to make the font color to black.

I appreciate your responses.

Thanks!

Dor

1 ACCEPTED SOLUTION

geoffcox
Giga Guru

This was my first assignment on ServiceNow, many years ago!



We have a global client script called "Fix Readonly Field Colors":



function onLoad(){


  window.setTimeout(fix_readonly_field_colors,500);


}



function fix_readonly_field_colors() {


  var i;


  var the_inputs = document.getElementsByTagName('input');


  for (i = 0; i < the_inputs.length; i++) {


          if (the_inputs[i].disabled || the_inputs[i].readonly) {


              the_inputs[i].style.color = '#000000';


              the_inputs[i].style.backgroundColor = '#eeeeee';


          }


  }


  the_inputs = document.getElementsByTagName('select');


  for (i = 0; i < the_inputs.length; i++) {


          if (the_inputs[i].disabled || the_inputs[i].readonly) {


              the_inputs[i].style.color = '#000000';


              the_inputs[i].style.backgroundColor = '#eeeeee';


          }


  }


  the_inputs = document.getElementsByTagName('textarea');


  for (i = 0; i < the_inputs.length; i++) {


          if (the_inputs[i].disabled || the_inputs[i].readonly) {


              the_inputs[i].style.color = '#000000';


              the_inputs[i].style.backgroundColor = '#eeeeee';


          }


  }


}


View solution in original post

14 REPLIES 14

geoffcox
Giga Guru

This was my first assignment on ServiceNow, many years ago!



We have a global client script called "Fix Readonly Field Colors":



function onLoad(){


  window.setTimeout(fix_readonly_field_colors,500);


}



function fix_readonly_field_colors() {


  var i;


  var the_inputs = document.getElementsByTagName('input');


  for (i = 0; i < the_inputs.length; i++) {


          if (the_inputs[i].disabled || the_inputs[i].readonly) {


              the_inputs[i].style.color = '#000000';


              the_inputs[i].style.backgroundColor = '#eeeeee';


          }


  }


  the_inputs = document.getElementsByTagName('select');


  for (i = 0; i < the_inputs.length; i++) {


          if (the_inputs[i].disabled || the_inputs[i].readonly) {


              the_inputs[i].style.color = '#000000';


              the_inputs[i].style.backgroundColor = '#eeeeee';


          }


  }


  the_inputs = document.getElementsByTagName('textarea');


  for (i = 0; i < the_inputs.length; i++) {


          if (the_inputs[i].disabled || the_inputs[i].readonly) {


              the_inputs[i].style.color = '#000000';


              the_inputs[i].style.backgroundColor = '#eeeeee';


          }


  }


}


Doubtless this could be compacted into a couple of lines using jQuery; that exercise is left to the reader!


Thank you so much!!!!!


If this helps, please remember to mark the correct answer. Thanks!