How to change highlight of choice selected | XM Community
Solved

How to change highlight of choice selected

  • 25 July 2018
  • 3 replies
  • 299 views

Userlevel 1
Badge +1
Hi all,

I have a matrix question, with 2 possible answer options. I noticed that once I click exactly in the button there is a red highlight around the button, like this
!

However, when I click on another option or outside the button, the reg highlight goes away, like so.
!

Does anybody know how to change this? I would like for the red highlight to never show up. I was having the same issue for multiple choice questions, but thanks to your guy's help, I was able to remove it. However, I have been unable to change for this type of question.

I am using the Qualtrics 2014 theme. The code I am currently using to change the color from red to green is this (some part of it might be redundant):

.Skin label.q-radio.q-checked {
background-color: #0F993D;
outline: #0F993D;
}
.Skin label.q-radio {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}

.Skin label.q-checkbox, .Skin label.q-radio {
border: 2px solid #0F993D;
width: 1.1em;
height: 1.1em;
display: inline-block;
background: 0 0;
outline: none;
}


.Skin label.Matrix.q-checked.q-focused, .Skin label.SingleAnswer.mobile.q-focused:hover {
outline: none;
}

.Skin label.q-radio.q-focused.q-checked {
box-shadow: #0F993D;
}

.Skin label.q-radio.q-checked.q-focused {
background-color: #0F993D;
}

Does anybody knows how to change the red highlight?
Thanks in advance for your help. You guys are super helpful!

Saludos,
MAF Team
icon

Best answer by mattyb513 25 July 2018, 04:44

View original

3 replies

Userlevel 6
Badge +6
This should be all the CSS you need, note that I have eliminated the pieces that are duplicating what's already in the theme:

```css
.Skin label.q-radio.q-checked {
background-color: #0F993D;
outline: #0F993D;
}
.Skin label.q-checkbox, .Skin label.q-radio {
border: 2px solid #0F993D;
outline: none;
}
.Skin label.Matrix.q-checked.q-focused, .Skin label.SingleAnswer.mobile.q-focused:hover {
outline: none;
}
.Skin label.q-radio.q-focused.q-checked {
box-shadow: 0 0 4pt 2px #0F993D;
}
.Skin label.q-radio.q-checked.q-focused {
background-color: #0F993D;
}
```
You were almost there, but when specifying `box-shadow` you need more than just the color. You can see I've added the x, y, and blur radius, and spread radius.
Userlevel 1
Badge +1
Hi @mattyb513 this works perfectly! Thanks for the help and the tip!
Saludos,
MAF Team
Badge +2

Hi,

I know it’s been a while, but I wanted to see if anyone knows how to get rid of the label.q-radio element entirely? For now, I was able to follow the above CSS code and make it blend in with the background, but once the selection is made, it still goes by default settings (a little animation with blue border and shadow for me). Does anyone know how to avoid this / get rid of it entirely or change colors of it at least?

Edit: I was able to do so for pc version with animation: none in .Skin label.q-radio.q-focused.q-checked but I would also like this to work across devices.

Thanks!

Leave a Reply