Applying CSS Styling to Read Only Project Custom Field

Had a requirement to apply CSS on a Project Custom Field, which is set to read-only through workflow stage. Challenge here was how to get div of that field where we only ‘guid’ attribute. Use the following script in a Content Editor webpart (click here to know how to add)

Following is the HTML of a read-only custom field.


<p>​director comments</p>


After applying jquery, it picks the field as shown below and applies css.


var myDiv = $('div[guid="cc056a66-c75c-e711-80cc-0050568d9644"]');
myDiv.attr("style", "border: 1px solid #ABABAB; padding-left:5px");



After applying css, custom field HTML looks something like this;

<div style="border:1px solid rgb(171,171,171);padding-left:5px;">

<p>​director comments</p>



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s