Change "read only" field color on case form

[sid23]

Hi,

We have "opened by" field as read only and we want to change the color of it to red. Now when its not read only i am able to change the color to red with the help of below client script but when its read only i am not able to. Any suggestions?

Script - 

function onLoad() {
var x = g_form.getReference('opened_by');

var openedByField = g_form.getElement('sys_display.' + g_form.getTableName() + '.opened_by');
if (x.vip == 'true')
openedByField.setStyle({color : "red"});
else
openedByField.setStyle({color : ""});
}

[Raju Koyagura]

Why can't you use Field Styles OOB feature? 

https://docs.servicenow.com/bundle/kingston-platform-administration/page/administer/navigation-and-ui/task/t_DefineFieldStyles.html

[sid23]

Yes I've been using that but it doesn't work on read only fields. Below is the style i have used and also the client script to highlight the field in red color.

When i unchecked the read only box it is highlighting in red. 

[Raju Koyagura]

I did some research on it and removed value from the field styles, it worked as expected. Because of value (javascript: some value) it is not working as expected in form view but working in list view. It seems a known issue https://hi.service-now.com/kb_view.do?sysparm_article=KB0564026

However there is a work around to achieve this using DOM in client scripts but its not recommended and not a best practice leads to performance and upgrade issues

function onChange(control, oldValue, newVa.lue, isLoading) {
var caller = g_form.getReference('opened_by', vipCallerCallBack);
}
function vipCallerCallBack(caller) {
if (caller.vip == 'true'){
gel("sys_display.incident.opened_by").style.backgroundColor = "red";
gel("sys_display.incident.opened_by").style.color = "yellow";
}

}

[sachinbhasin11]

You can use getcontrol() API as well to change the style of a field