Hi there, I was able to put something like this in place by using the below CSS:
#QID1.QuestionOuter.BorderColor.TE.QID1.Highlight {
background-color: #FF0000;
}
Update the QID in the above as needed.

Hi Tom_1842,
I am not good with jQuery. Please do let me know if I am doing it correctly.
var QID= this.questionId;

QID.QuestionOuter.BorderColor.TE.QID.Highlight {
background-color: #FF0000;
}

Hi, try adding it to the Custom CSS portion of the survey's Look & Feel.

Hey Tom_1842
Ohh my bad. I thought I needed to make that change in Qualtrics JS.
I was able to get the question ID and use that ID in the CSS code snippet.
However, I was curious to know whether it displays the border in a `red` colour all the time or only when the actual error has happened i.e when the user clicks the next button without entering anything in the text field. Are we targeting the error class on the text field?

Glad to hear it! On my end, it only adds the red background when the respondent runs into the error message.
You might also consider trying out the "Modern" or "Classic" Layouts. Without adding any CSS, the Modern Layout adds a border to the question that needs respondent attention, and the Classic Layout adds a background-color to the question that needs attention. Both the border and the background color for these layouts use a lighter shade of the Primary Color.

Thank you Tom_1842 for the quick and detailed response. I will try out the suggestions you mentioned above.