I have a text field which needs to be highlighted if a user click's on the Next button without entering anything in the text field.
Solved
How to highlight a required text field with red colour ?
+2Best answer by Tom_1842
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.
+28Hi 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.
+2Hi 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;
}
+28Hi, try adding it to the Custom CSS portion of the survey's Look & Feel.
+2Hey 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?
+28Glad 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.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.