How to change the background color of labels on a form

vspk
Giga Expert

Color.PNG

The picture attached is the variables created in a catalog item.


I want to change the color from blue to some other color.
How to change it?

1 ACCEPTED SOLUTION

Rushit Patel2
Tera Guru

Hi sneha,



make one on load script and paste below code.



var text = $j("label[for='IO:8bbf1720eb0311003623666cd206fe8f']");


     


      text.css('background-color','orange');


      text.css('width','100%');



change the for="IO:yourlabelID".



Please mark helpful/correct/like if it helps



Regards,


Rushit Patel


View solution in original post

6 REPLIES 6

Mujtaba Amin Bh
Mega Guru

I think the servicenow theme decides what color the labels will be of. You can change the theme to change the color.



However, if you want change it for a particular catalog item then DOM manipulation will be required.


Hi,



For changing form label color, you need to write onLoad client script. Please refer below script for your reference:



function onLoad() {


  //Change the description label to 'My New Label' with bold red text


  changeFieldLabel('description', 'My New Label', 'red', 'bold','yellow');


}




function changeFieldLabel(field, label, color, weight,bgColor){


  try{


  var labelElement = $('label.' +   g_form.getControl(field).id);


  labelElement.select('label').each(function(elmt) {


  elmt.innerHTML = label + ':';


  });


  if(color)


  {


//Label Color


  labelElement.style.color = color;


//Label Background color


  labelElement.style.background = bgColor;


  }


  if(weight)


  labelElement.style.fontWeight = weight;


  }catch(e){}


}


Mujtaba Amin Bh
Mega Guru

If you want to change all labels on a item then just write an onload catalog client sript with below line of code,



$("label").style.background   = 'red';


Rushit Patel2
Tera Guru

Hi sneha,



make one on load script and paste below code.



var text = $j("label[for='IO:8bbf1720eb0311003623666cd206fe8f']");


     


      text.css('background-color','orange');


      text.css('width','100%');



change the for="IO:yourlabelID".



Please mark helpful/correct/like if it helps



Regards,


Rushit Patel