How can I change the checked radio button color for the Single-Choice test questions in Docebo? I need help in CSS or other settings that I can change the checked radio button from system green to blue (#0099ff) . Thanks.
Answer
Changing color for checked radio button
Best answer by DPatel
Hi there,
I think you are using the Old Course Player maybe?
If so try the following code. Change the Hex Code as necessary
/* Target the outer circle when the radio button is selected */
.question-block input[type="radio"]:checked ~ .mdl-radio__outer-circle {
border-color: #0099ff!important;
}
/* Target the inner circle when the radio button is selected */
.question-block input[type="radio"]:checked ~ .mdl-radio__inner-circle {
background-color:#0099ff!important;
}
Hi there,
Give the following CSS a go
/* Change Checked Radio Button on Quiz */
lrn-training-material-player-quiz .dcb-te-question-wrapper .color-success svg path {
fill: #0099ff!important;
}
Thanks for the quick response, DPatel. I’ve put hou CSS code to the Custom CSS area, but the color won’t change to blue (#0099ff), still green. Am I doing something incorrectly?
Hi there,
You should be able to place the Custom CSS in the below panel.
When navigating to a test and selecting the answer, this should override the Configure Branding and Look settings.
Hope this is of help!
Hi DPatel,
I have done exactly what you’ve instructed, see below. I saved changes and reloaded the page. But the color still shows green even if I’ve just created a new Quiz training material in a course. I don’t what went wrong and what other areas I also needed to check?
Hi there,
I think you are using the Old Course Player maybe?
If so try the following code. Change the Hex Code as necessary
/* Target the outer circle when the radio button is selected */
.question-block input[type="radio"]:checked ~ .mdl-radio__outer-circle {
border-color: #0099ff!important;
}
/* Target the inner circle when the radio button is selected */
.question-block input[type="radio"]:checked ~ .mdl-radio__inner-circle {
background-color:#0099ff!important;
}
It’s working now, see blow. Thanks so much, DPatel. I really appreciate your help!
Now I can try the previous code if I use the New Course Player down the road.
Thanks!
DrZ
Log in to Docebo Community
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Docebo Employee Login
or
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.