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

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("lclass^=q-]");
  all_buttonsuall_buttons.length - 1].id = "last_button";
  last_button = ch.getElementsBySelector("#last_button")b0];

  // 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.

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; }

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

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

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

Leave a Reply


Terms & Conditions