[Solved] Horizontal radio button and text change when answer selected?




I changed the color for the button and text when an answers is selected, but it only works when the Radio Buttons are in regular vertical order. When I switch the Radio Buttons to horizontal, the text does not change the color I want it to when the answer is selected. Can you please help me make it so that both buttons and text change color when selected for horizontal as well? Thanks! See attached screenshot.


Here is the CSS I have for the check boxes and the color I want the selections to be. Thanks!

.sg-replace-icons input[type=radio]:checked + label:before,
.sg-replace-icons input[type=checkbox].sg-input-checkbox:checked + label:before{

.sg-replace-icons input[type=radio]:checked + label,
.sg-replace-icons input[type=checkbox].sg-input-checkbox:checked + label{

.sg-replace-icons input[type=radio] + label:before {
/* unselected radio */
/* content: “\f10c”; – Default icon */
content: “\f096”;
.sg-replace-icons input[type=radio]:checked + label:before {
/* selected radio */
/* content: “\f192”; – Default icon */
content: “\f046”;
color: #4169E1;

Heather asked

    Best answer


    Hi Heather, thanks for including your CSS! I was able to replicate that situation in my own account, and have discovered why the labels are not changing in a horizontally aligned question.

    The reason your CSS is not being applied to these horizontally-aligned questions, is that the HTML structure is quite different. The label and input element are no longer siblings, but actually located quite far apart in the markup. Because of how separated these elements are, there is actually not a way to affect the color of the label based upon the state of the input element, to the best of my knowledge.

    I’m sorry for the trouble the structure of this question causes! One solution you could look in to if you wish to pursue this further would be to register an event handler using javascript that would add a class to some shared parent element whenever an input element is selected. With a class name dynamically assigned to a parent element (such as the table), it would then be possible to create a CSS selector that would target the label depending on the status of the input element. This will of course require access to development resources, javascript knowledge, and/or a desire to learn javascript 🙂

    Nathan - Survey Astronaut answered

      Hey Heather! Can you post the CSS that you’ve used to affect the text color? It probably just needs to be tweaked a little bit to affect the text color of horizontal-aligned options 🙂

      Nathan - Survey Astronaut answered


        Question stats

        • Active
        • Views11647 times
        • Answers2 answers
        • Followers0 followers