Modify Font Color on a readOnly field

salvadormarchan · ‎06-11-2014

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

geoffcox · ‎06-11-2014

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

jamesproske · ‎03-23-2015

Is there a method that will allow this to work on fields that are set as readonly within a UI Policy? Within Eureka if a UI Policy sets a field as read only the background and foregound colors are different that if a field is set as read only withint the data dictionary.

geoffcox · ‎03-25-2015

Yes, although it requires injecting a small delay to make sure that the client script runs AFTER the UI policy.

This code sets the readonly fields purple.

function onLoad() {


   window.setTimeout(do_the_thing,2000);


}


function do_the_thing() {


   jQuery(".readonly, .disabled,.input_group_disabled, :disabled").css("color","#000000").css("background-color","#ff00cc");   


}

Community Alums · ‎12-04-2021

Hello Geoff,

By any chance would you know if this works in Agent Workspace?

Koji Yanase · ‎08-07-2016

Hi Geoffrey,

Can you select some fields to be changed? Does every read only field have the same background color?

Thanks.

geoffcox · ‎08-11-2016

You can modify the jQuery to select as precisely as you want. My example applies the same style to all the readonly fields, but you can be more specific.