Circle the selected answer | Experience Community
Skip to main content
Solved

Circle the selected answer

  • October 28, 2021
  • 2 replies
  • 65 views
JR33
QPN Level 2 ●●
Forum|alt.badge.img+10
  • JR33
  • QPN Level 2 ●●

In my survey I use a question with smilley as modalities. I apply a custom css so that there is no gray background displayed :
.Skin #QID19 label.SingleAnswer.q-checked{background-color:#ffffff; border-color:#009ee0;}
On the other hand, I would like to keep the modality surrounded with border-color so that if the respondent goes back, he will know which modality he has selected. It doesn't seem to be working. The background remains well selected but not the border.
How can I do this? Thank you

Best answer by Tom_1842

Hi there, if you still need, this can be put in place by grabbing the CSS for the .q-focused class (when an answer is selected and in focus) and adding it to the .q-checked class (when an answer is selected). For Classic layout, try adding the below CSS to the Style section of the survey's Look & Feel. Slider included in the picture to show respondent moved on from MC question and q-focused border still in place. 
.Skin label.MultipleAnswer, .Skin label.SingleAnswer {
    background: #ffffff !important;
}

.Skin label.MultipleAnswer.q-checked, .Skin label.SingleAnswer.q-checked {
    background: #ffffff !important;
    box-shadow: 0 0 0 3px activeborder !important;
    outline: #0ea7ff auto 5px !important;
}
MC_outline.png

    2 replies

    Tom_1842
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+28
    • Tom_1842
    • Level 8 ●●●●●●●●
    • Answer
    • December 29, 2022

    Hi there, if you still need, this can be put in place by grabbing the CSS for the .q-focused class (when an answer is selected and in focus) and adding it to the .q-checked class (when an answer is selected). For Classic layout, try adding the below CSS to the Style section of the survey's Look & Feel. Slider included in the picture to show respondent moved on from MC question and q-focused border still in place. 
    .Skin label.MultipleAnswer, .Skin label.SingleAnswer {
        background: #ffffff !important;
    }

    .Skin label.MultipleAnswer.q-checked, .Skin label.SingleAnswer.q-checked {
        background: #ffffff !important;
        box-shadow: 0 0 0 3px activeborder !important;
        outline: #0ea7ff auto 5px !important;
    }
    MC_outline.png

    JR33
    QPN Level 2 ●●
    Forum|alt.badge.img+10
    • JR33
    • Author
    • QPN Level 2 ●●
    • January 9, 2023

    Thank you so much Tom_1842

    Terms & ConditionsAccessibility statement