How do I change the highlights when an option is selected | XM Community
Solved

How do I change the highlights when an option is selected

  • 20 July 2018
  • 3 replies
  • 87 views
M
Userlevel 1
Badge +1
Hi,

I have the following code, to change the Qualtrics 2014 theme from red to green. However, I am unable to remove the red highlight/border when an option is selected (see image). the bording goes away once I click on another option.

!
Does anyone know what object is responsible for this?

Also, when I hover over the next button or click it, although it is green, it turns red. Once I move the cursor away, it turns green again.

Image 1 - Initial view
!

Image 2 - Once I hover over/ click on "Next button"
!

The current CSS I have is:

.Skin #Buttons #NextButton, .Skin #Buttons #PreviousButton {
Background: #0F993D;
Background-color: #0F993D;
}

.Skin label.MultipleAnswer.q-checked, .Skin label.SingleAnswer.q-checked {
background: #0F993D;
Background-color: #0F993D;
border-color: #000000;
color: #000000;
}

.Skin label.MultipleAnswer.q-focused.q-checked, .Skin label.SingleAnswer.q-focused.q-checked {
background:#0F993D;
}

Thanks!
MAF Team
icon

Best answer by TomG 22 July 2018, 21:59

View original

3 replies

TomG
Rank
Userlevel 7
Badge +27
I believe it is the outline property of the q-focused.q-checked rule.
M
Userlevel 1
Badge +1
Hi TomG, Thanks for the answer. This worked for removing the red highlight.
Would you happen to know also how to change the color of the next button when you hover over it? The button looks green, but once you place the cursor over it or when you click on it, it turns red.

Thanks!
TomG
Rank
Userlevel 7
Badge +27
@MAFTeam,

You need to make sure you modify the styles of the NextButton pseudo classes (e.g, :hover) if they exist. For example:
```
.Skin #Buttons #NextButton:hover { background-color:green }
```
There may be pseudo class styles other than hover that you also need to modify.

Leave a Reply


Terms & Conditions