Answer: use CSS to change options color in a drag and drop rank question type in mobile optimized version


This issue was resolved by the SurveyGizmo support team, I thought I post it here, just in case someone else has a similar issue.

There was a small bug which caused drag and drop rank questions when rendered in mobile to make the text unreadable. See the snapshot. Where the black arrows point you were supposed to see text over the grey highlight. Instead both the text and the highlight are the same shade of grey, hence unreadable:


Although this bug might be fixed by the time this post is read – the workaround which used to solve it is interesting as it is.

You can use CSS to change the background highlight color, without changing the text color. Here goes:

Add the following CSS code to the HTML/CSS editor (the editor is located in the style tab, bottom part of screen, under the survey preview pane):

.sg-survey input[type=”radio”]:checked + label, .sg-survey input[type=”checkbox”]:checked + label {
background-color: white;
color: black;


Voila! The text will be black and the background will be white (you can change colors by changing the “white” and “black” parts inside the curly brackets {}.


Hope this helps, and thanks to the SurveyGizmo support team for providing this solution.

Dominic Sharpe commented


    Question stats

    • Active
    • Views132 times
    • Answers0 answers
    • Followers1 follower