Selection dot change colour possibility

Hello There,

Thank you for reaching out to us.

In response to your requirement for assistance with custom CSS, I’ve already forwarded your request to our development team. We’ll be sure to get back to you as soon as we hear back from them.

Your patience is greatly appreciated.

Kind regards, 

QSM Support Team

Thank you Sir. I will wait ??

Hi there,

Thank you for your patience!

Please review the following CSS code for customizing the design of radio buttons. You can easily add this code to the Custom CSS tab by following these steps: Navigate to QSM Quizzes and Survey > Styles tab > Custom CSS Subtab > Paste the code > Click on save. For additional guidance, please refer to the attached screenshot. https://snipboard.io/6hFP1z.jpg


Furthermore, you have the flexibility to adjust the background color and border color according to your preferences by editing these style properties. https://snipboard.io/ZLqP9U.jpg . You can use any color format, such as RGB, hexadecimal code, or color names.

We believe this information will be helpful for you. Please give it a try and feel free to let us know how it works out for you.

Warm regards,
QSM Support Team

.qsm-quiz-container .qsm-question-wrapper input[type=radio] {
    display: none;
}
 
.qsm-quiz-container .qsm-question-wrapper input[type=radio] ~ .qsm-input-label::before {
	content: "";
	display: inline-block;
	height: 13px;
	width: 13px;
	border: 1px solid gold;
	border-radius: 50%;
	margin-right: 10px;
	background-color: lightgray;
	position: relative;
	top: 6px;
	transform: translate(26%, -25%);
	outline: none;
}
.qsm-quiz-container .qsm-question-wrapper input[type=radio]:checked ~ .qsm-input-label::before {
	content: "";
	display: inline-block;
	width: 13px;
    height: 13px;
    background-color: gold;
    border-radius: 50%;
    transform: translate(26%, -25%);
    box-shadow: inset 0 0 0 4px lightgray;
	outline: none;
}

Thank You for Your response.

Unfortunately, the option to select doesn’t work. Previously, after selecting, a blue dot would appear, and that’s what I meant – to have it in gold instead of blue. Currently, it doesn’t appear at all.

https://snipboard.io/hLZqy9.jpg

I’ve changed the code a little. Now it is working for me ?? If any one need code like this i am pasting it:

.qsm-quiz-container .qsm-question-wrapper input[type=radio] {
display: none;
}

.qsm-quiz-container .qsm-question-wrapper input[type=radio] ~ .qsm-input-label::before {
content: "";
display: inline-block;
height: 13px;
width: 13px;
border: 1px solid gold;
border-radius: 50%;
margin-right: 10px;
background-color: lightgray;
color: #d1b97f;
position: relative;
top: 6px;
transform: translate(26%, -25%);
outline: none;
}

.qsm-quiz-container .qsm-question-wrapper input[type=radio]:checked ~ .qsm-input-label::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #d1b97f;
color: #d1b97f;
border-radius: 50%;
transform: translate(26%, -25%);
box-shadow: inset 0 0 0 4px lightgray;
outline: none;
}

If You want to see how it looks : https://rozwodpoprosze.pl/pomoc-psychologiczna/quizy/ and choose.

@sadiyakhanam Thank You very much for Your help and patience ??

• This reply was modified 6 months, 2 weeks ago by Jacek.