JavaScript for radio button color change doesn't work in vertical case. | XM Community
Skip to main content

JavaScript for radio button color change doesn't work in vertical case.

  • October 5, 2022
  • 4 replies
  • 386 views
L
Forum|alt.badge.img+1

I want my #3 radio button in red color. I used the Javascript code below. It works well in the horizontal application but doesn't work in vertical and column applications.
JS :
Qualtrics.SurveyEngine.addOnReady(function () {
  ch = this.getChoiceContainer();
  all_buttons = ch.querySelectorAll("[class^=q-]");
  all_buttons[all_buttons.length - 1].id = "last_button";
  last_button = ch.getElementsBySelector("#last_button")[0];

  // Set border to red
  last_button.style.borderColor = "red";
});
p1.pngScreen Shot 2022-10-05 at 12.16.45 AM.pngwork well in the horizontal case
Screen Shot 2022-10-05 at 12.21.25 AM.pngbut it doesn't show red color, though the element code show" red". The sample problem happens in column application also.
The code from https://community.qualtrics.com/XMcommunity/discussion/13922/change-the-color-of-radio-button-before-selection-but-only-for-the-last-response
she works out both horizontal and vertical one year ago. I am not sure why not now. I am using the basic blank theme, and flat layout, without additional CSS.

    4 replies

    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • October 5, 2022

    With a vertical list, the 'radio buttons' are added using the ::before pseudo-class. So, you can't style them with JS because they aren't in the DOM. You'll have to use CSS:
    .Skin li:last-child label.SingleAnswer>span::before, 
    .Skin li:last-child label.SingleAnswer.q-focused>span::before { border:2px solid red; }

      L
      Forum|alt.badge.img+1
      • LingZ
      • Author
      • October 5, 2022

      Many thanks! It works perfectly. Appreciate it.
      https://community.qualtrics.com/XMcommunity/discussion/comment/50412#Comment_50412

        SuhasM
        Qualtrics Employee
        Forum|alt.badge.img+16
        • SuhasM
        • Qualtrics Employee
        • October 5, 2022

        TomG comes up with another custom code solution! 💻️ Thank you for your valuable contributions to the community! 🙂

        G
        Level 2 ●●
        Forum|alt.badge.img+3
        • giuliopalma
        • Level 2 ●●
        • May 2, 2024

        Hi @TomG 
        I have a similar issue.
        In my case I would like to change the colour of the radio button from white to black and mantain the grey background. 
        Any advise on how to change my CSS code to achieve this ?
        I am in a flat layoutr on qualtrics

        1 Attachments
        Terms & ConditionsAccessibility statement