ServiceNow allows you to modify the CSS style of any field by adding a personalized style. Instructions for performing this customization are outlined on the ServiceNow wiki. There isn’t a built-in way to do this same thing with the fields (variables) in the Service Catalog. Applying styles to service catalog variables is possible however through the use of catalog client scripts. This article shows you how.

This customization really boils down to getting the correct input element on the form and applying the correct CSS style. Because this all needs to be done in javascript, the regular CSS rules you’re used to need to be modified a bit. For example, setting a background color on a field needs to be done with ‘backgroundColor’ instead of ‘background-color’. Hyphens are replaced by a camel-case convention for CSS styles.

To get the form element you can simply use ‘g_form.getControl(VARIABLE_NAME)’. Then you simply apply the correct CSS style like this…

//Set the width of a field
g_form.getControl('').style.width = '150px';

Here are some common styles I’ve seen used in the past…

g_form.getControl('').style.width = '150px'; //Set the width of a field
g_form.getControl('').style.backgroundColor = 'LimeGreen'; //Set the background color of a field
g_form.getControl('').style.color = 'blue'; //Set the text color of a field
g_form.getControl('').style.fontStyle = 'italic'; //Set the text font to italic
g_form.getControl('').style.fontWeight = 'bold'; //Set the text font to bold

Reference fields: A special case

One thing to watch out for is reference fields. The ‘control’ element is actually hidden for all reference fields so using the script above on a reference field will set a style, but that style will be set on an element you’ll never see. For reference fields you need to get the ‘sys_display’ input element. Here’s a sample script that shows how you could do this…

var myVar = $('sys_display.' + g_form.getControl('').id); //Get the correct reference element = '350px'; //Set the width

Putting it all together

The result in the image above was produced by the following catalog client script…

function onLoad() {
//Set styles for the 'caller_id' variable
var myVar = $('sys_display.' + g_form.getControl('caller_id').id); = '350px'; = 'LimeGreen'; = 'blue'; = 'italic';

//Set styles for the 'impact' variable
var myVar2 = g_form.getControl('impact'); = '200px'; = 'yellow'; = 'purple'; = 'bold';