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

CatKCatK Community Member Qubie ✭

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

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:



Best Answers

  • CamMCamM NSW, Australia Qubie ✭
    edited July 10 Accepted Answer

    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.



  • CatKCatK Qubie ✭
    Accepted Answer

    Brilliant! that worked. Thanks so much.

Sign In to Comment