Grey-out disabled “Managed metadata” & “Multiple-line of text” fields

Question

I am working on a custom list inside SharePoint online team site. and inside the list's Edit form i want to set a managed metadata field (titled "Customer Name") and a multiple-line of text field (titled "Description") as Read-Only, so i added this jQuery:-

//disable the customer name managed metadata
$("div[title='Customer Name']").children().prop("contenteditable",false);
$("div[title='Customer Name']").parent().find('img').hide();

//disable the Description.
$($("[id^=ProjectDescription_][id$=inplacerte]")[0]).attr("contenteditable","false");

where it will prevent users from editing the 2 fields (which is good), but it did not grey-out those fields, so users will think that those fields are enabled, so not sure if i can grey out these 2 fields? here is a screen shot of how those fields will look like after using the above jQuery:-

Answer 1

You can set the column background color to display as greyed out:

$("div[title='managedmetadata']").children().prop("contenteditable",false).css('background-color','#F6F6F6');
$("div[title='managedmetadata']").parent().find('img').hide();

$($("[id^=description_][id$=inplacerte]")[0]).attr("contenteditable","false");
$("[id^=description_][id$=topDiv]").css('background-color','#F6F6F6');