Styling the radio button (pseudo-element) on hover and focus | XM Community
Solved

Styling the radio button (pseudo-element) on hover and focus

  • 9 July 2020
  • 2 replies
  • 297 views

Hi there,

we have used css to style our survey, so that the background is grey, and the text and borders of all elements are white.
For single-answer multiple choice questions, we also have to style the pseudo-element radio button to be white as well using the following css:
.Skin label.MultipleAnswer>span:after, .Skin label.SingleAnswer>span:after {border-color: #fff;}

This works well.

The problem we are having is when the participant hovers or focuses on the choice, the radio button turns back to grey.

We have tried the following css to set the border colour of the pseudo-element, but with no success:

.Skin label.MultipleAnswer>span:hover::after, .Skin label.SingleAnswer>span:hover::after {border-color: #fff;}

.Skin label.MultipleAnswer>span:hover:after, .Skin label.SingleAnswer>span:hover:after {border-color: #fff;}

.Skin label.MultipleAnswer>span:after::hover, .Skin label.SingleAnswer>span:after::hover {border-color: #fff;}

.Skin label.MultipleAnswer>span:hover:after, .Skin label.SingleAnswer>span:after:hover {border-color: #fff;}

The screenshot below shows the issue. The participant is hovering over the first option (Left) and the radio button is grey, when we want it to be white:
Screen Shot 2020-07-09 at 8.35.54 am.pngTIA

icon

Best answer by CatK 13 July 2020, 04:16

View original

2 replies

Userlevel 5
Badge +20

Hi CatK,
Try the following instead -:
.Skin label.MultipleAnswer:hover>span:after {border-color: #fff;}

.Skin label.SingleAnswer:hover>span:after {border-color: #fff;}
Hopefully that helps you to get it over the line.
Cheers,
Cameron

Brilliant! that worked. Thanks so much.

Leave a Reply