Changing font and selected/unselected button colors | XM Community
Skip to main content

A survey I'm building includes a multiple choice question that has three response options, and only one response can be selected. The options are presented as rectangular buttons containing text.
I'd like to customize the color scheme so that when an option is unselected, its background color is light green, font color is dark green, and border color is dark green. When an option is selected, I'd like for its background color to be dark purple, font color to be white and border color to be dark purple.
Any tips on how I can achieve this? I'm not sure what CSS code to use, and I'm very much a beginner.

Hi there, if you're still looking for this, the below CSS should get you going in the right direction if you are using a single select Multiple Choice question. Also, Qualtrics adds a border to selected answer options that I was not able to prevent with CSS, but changing the Primary Color to white over in the Look & Feel worked for me to hide it.
/*change colors of unselected answer choices*/

.Skin label.SingleAnswer {
    color: #006400 !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #006400 !important;
    background-color: #90EE90 !important;
}


/*change colors of selected answer choices*/

.Skin label.SingleAnswer.q-checked.q-focused {
    color: #ffffff !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #800080 !important;
    background-color: #800080 !important;
}
GreenPurpleAnswerChoices.png

Hi, I’m doing something similar where I want the text to stay black but the colour scheme changes to yellow for the background colour of the selected answer box.

I have the codes and have tried this but it doesn’t seem to work. Any suggestions?

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

 

Thank you

Is it specific for one question or you are trying to apply it on all the question. If you are trying to apply this on all the questions then paste your CSS under custom look and feel > style > CSS box.

 

Hi Arun,

Thanks for the reply. Yes it is for all questions. I tried it under the custom CSS. But it doesn’t seem to work.

I’ll give it another go.

Hi,

I tried again and it isn’t working even if I go through preview. I’m thinking perhaps my coding is not correct, but I’m very new to this and have no idea how to go about fixing it.

Any suggestions greatly appreciated.

Thanks

@ELS281 Which layout are you using? Below for Flat, Modern, and Classic:

.Skin label.SingleAnswer.q-checked {
    color: #000000 !important;
    background-color: #F9E980 !important;
}

Below for Simple layout:

.mc .choice.selected .choice-label, .mc .choice.selected.focused .choice-label  {
    background-color: #F9E980;
    border-color: transparent;
}

 

OH MY GOODNESS!

@Tom_1842 you are amazing and a life saver!!

 

Much appreciated :D

Leave a Reply


Terms & Conditions