Selection Colour - Question | XM Community
Skip to main content

Hi All

I am aware I can change the selection colour by changing the primary colour in Look & Feel but doing this alters a background colour I can’t change.

How would I change the selection colour from back to say blue for all questions?

Thanks all!

Hi @parkie_0007,

Try using below code:

.Skin .MC .QuestionBody label.MultipleAnswer:hover, .Skin .MC .QuestionBody label.SingleAnswer:hover 
{
  background-color: #51ba69 !important;
 background-origin:content-box;
}
.Skin .MC .QuestionBody label.MultipleAnswer.q-checked, .Skin .MC .QuestionBody label.SingleAnswer.q-checked
 {
background-color: #fdcb05 !important;
background-position: right;
background-origin:content-box;
color: white !important;
 font-weight:bold;
}

}
</style> 

 

This code is working for me. You will have to make slight changes to code according to your requirements.

Let me know if this helps you.

 

Regards,

Sachin N


Thanks this worked well.

What if I just wanted to change the tick box colour?

Thanks :)


Hi @parkie_0007,

Then use only this:

.Skin .MC .QuestionBody label.MultipleAnswer:hover, .Skin .MC .QuestionBody label.SingleAnswer:hover 
{
  background-color: #51ba69 !important;
 background-origin:content-box;
}

</style> 


Thanks but this is the hover state.

Ideally I just want the tick box black to be another colour.

Thanks :)

 


Hi @parkie_0007,

Hope this code helps you:

.Skin label.SingleAnswer.q-checked.q-focused>span::before, .Skin label.SingleAnswer.q-checked>span::before {background: #FFFFFF!important;

 </style> 

 

Regards,

Sachin N


Thanks.

But using this….

you’ll see your suggestion is at the end with colour #39C0DE, does not seem to work.

Thanks :)

.Skin .MC .TextEntryBox, .Skin .TE .ESTB .InputText, .Skin .TE .FORM .InputText, .Skin .TE .ML .InputText, .Skin .TE .PW .InputText, .Skin .TE .SL .InputText, .Skin .TE textarea, .Skin input.TextEntryBox, .Skin inputitype=password], .Skin inputitype=search], .Skin inputitype=text], .Skin textarea {
border: 1px solid #ffffff !important;
background-color: #ffffff !important;
color: #262626 !important;
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
-ms-border-radius: 0px !important;
-o-border-radius: 0px !important;
border-radius: 0px !important;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: 262626;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: 262626;
}

::-ms-input-placeholder { /* Microsoft Edge */
color: 262626;
}
.Skin label.MultipleAnswer.q-checked+input, .Skin label.MultipleAnswer.q-checked+textarea, .Skin label.SingleAnswer.q-checked+input, .Skin label.SingleAnswer.q-checked+textarea {
border: 0 !important;
}
.Skin .TE .ChoiceStructure .Long
{
width: 100% !important;
}
.Skin label.SingleAnswer.q-checked.q-focused>span::before, .Skin label.SingleAnswer.q-checked>span::before
{
background: #39C0DE!important;
  }

 


Hi @parkie_0007,

Try with this code once:

.Skin label.SingleAnswer.q-checked>span::before

{

background: #FFFFFF!important;

 }

</style> 

 

You will have to make slight changes to the code so that it works for you.

 

Regards,

Sachin N

 


Thanks!

I think I found an easier solution but that has presented another problem.

By changing the primary colour this has given me the selection colours I wanted (blue).

But this has also changed the colour around my logo. How can I change the colour around my logo?

 

Thanks :)

 


Leave a Reply