Custom CSS: Colours for hover and click states | XM Community
Skip to main content

I have read and found so much info about custom CSS code as well as watching some of the tutorials and I can not get the code to work.
I am trying to achieve:

  1. Hover and click states on my radio buttons

  2. Custom colours on the progress bar

  3. Progress bar under header not above it and not after the question.

I have input code from these forums with no success. Some specific instruction would be really helpful. 😀
Screen Shot 2022-03-27 at 1.01.58 pm.pngThanks in advance

Hi there, for your first 2 questions, try pasting the below code in the Custom CSS over in the survey's Look & Feel:
/*change colors of selected answer choices*/

.Skin label.SingleAnswer.q-checked.q-focused {
    color: #003366 !important;
    border-color: #003366;
    background-color: #003366 !important;
}


/*change color of choice on hover*/

.Skin label.SingleAnswer:hover {
    border-color: #003366;
    background-color: #003366 !important;
}


/*change color of progress bar*/

.Skin .ProgressBarFill {
background-color: #003366;
}
For your third question, also in the Look & Feel, do you have the Progress Bar Position set to "Bottom"?

Leave a Reply


Terms & Conditions