How do I change the highlights when an option is selected

Question

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

TomG · Accepted Answer

I believe it is the outline property of the q-focused.q-checked rule.

TomG · Answer

@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.

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded