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";
});
work well in the horizontal case
but 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.
JavaScript for radio button color change doesn't work in vertical case.
+1
+27With 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; }
+1 Many thanks! It works perfectly. Appreciate it.
https://community.qualtrics.com/XMcommunity/discussion/comment/50412#Comment_50412
+16TomG comes up with another custom code solution! 💻️ Thank you for your valuable contributions to the community! 🙂
+3Hi
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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.