Change Response Color | XM Community
Skip to main content

I need the survey taker to acknowledge that they have read three sets of assurances. I have a block set up with three multiple choices questions with only one choice available, "Read and Acknowledged" for each of the three sets. I would like the 'Read and Acknowledged' choice to be white text on a green background. Is there any way to do this for just this block?

Can you share the preview link to the block? The CSS required will vary depending upon the theme you are using.


Sure thing! Here you go: https://widpi.co1.qualtrics.com/jfe/preview/SV_0BQZtMsZnmbTllQ/BL_6Vhirbs5vD4iqrk?Q_SurveyVersionID=current


You want the choice background green on page load or turned green (instead of indigo) upon clicking? This post will achieve the former in the top half, the later in the bottom half.

Maybe something like this in the CSS file? This sets each background individually by element Id. You can set these via a host of CCS selectors, but I didn't want to set by class in case it changed other elements unknowingly.

#QID10-4-label {
  background-color: green;
}

#QID11-4-label {
  background-color: green;
}

#QID13-4-label {
  background-color: green;
}


Alternatively, if you're looking for the background to be green after clicking, I'd actually set that using JavaScript as CSS doesn't really have a check for if the button has been clicked (disclaimer: that I know of).
I cheated a bit and just created my own eventListener rather than checking Qualtrics' built-in one.
Adding this to each questions' JavaScript will change the background to Green upon clicking. You could also update the choices' bordercolor (currently indigo as well after clicking) to white or whatever by simply adding another line after the semi-colon (x.style.borderColor = "white".
document.getElementById(x).onclick = function() {
  x.style.background = "green";
}
(where 'x' = yourElementId. i.e. 'QID10-4-label' for the first, 'QID11-4-label' for the second, etc.)

Let me know if you have any questions!


JeremyK That worked beautifully. Many thanks!


Leave a Reply