When a user takes a survey on a mobile device, the answer options for checkbox or radio button questions and the like all have black boxes around them. Is there a way to disable the box? This is not the border between questions, but around the answer options themselves.
I was given some CSS code to try, but it does not appear to affect this setting.
.sg-survey body .sg-mobile-optimized .sg-question.sg-type-radio .sg-question-options label,
.sg-survey body .sg-mobile-optimized .sg-question.sg-type-checkbox .sg-question-options label{
border: none;
}
Best answer
So close both of you! The below should work. No space between body and .sg-mobile-optimized.
.sg-survey body.sg-mobile-optimized .sg-question.sg-type-radio .sg-question-options label,
.sg-survey body.sg-mobile-optimized .sg-question.sg-type-checkbox .sg-question-options label{
border: none;
}
Thank you for using our community and helping each other!
Bri Hillmer
Documentation Coordinator
SurveyGizmo Customer Experience Team
-
Inteleaf -
That worked! Thank you very much.
-
My pleasure!
Two simple tweaks:
First, leave a space between the word ‘label’ and the first bracket (sg-question-options label {).
Second, add the text “!important;” after the CSS attribute ({border: none !important;).
If these don’t do anything, we will have to resort to something more drastic.
-
Inteleaf -
Unfortunately, the boxes are still present.