Changing font and selected/unselected button colors | XM Community
Solved

Changing font and selected/unselected button colors

  • 3 March 2022
  • 7 replies
  • 424 views
L

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.

icon

Best answer by Tom_1842 1 June 2023, 21:55

View original

7 replies

Tom_1842
Rank
Userlevel 7
Badge +27

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

E
Rank
Badge

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

ArunDubey
Rank
Userlevel 7
Badge +32

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.

 

~ Arun Kumar Dubey
E
Rank
Badge

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.

E
Rank
Badge

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

Tom_1842
Rank
Userlevel 7
Badge +27

@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;
}

 

E
Rank
Badge

OH MY GOODNESS!

@Tom_1842 you are amazing and a life saver!!

 

Much appreciated :D

Leave a Reply


Terms & Conditions