Radio button color changes after moving to next question | XM Community
Skip to main content
Question

Radio button color changes after moving to next question

  • August 23, 2023
  • 1 reply
  • 95 views
J
Forum|alt.badge.img

I customized the color of the radio buttons and fill on my survey, so when a respondent click on a response, it turns blue. But now, when the respondent moves on to the next question, the response selection on the previous question reverts back to the original background color. Please halp! This is the code I’m using which is likely very messy and filled with errors:

 

.Skin label.MultipleAnswer>span::before {border:2px solid #000000!important; }

.Skin label.SingleAnswer>span::before{border:2px solid #000000!important; }

.Skin label.MultipleAnswer.q-checked>span::before {border:2px solid #000000!important; background-color:#4592FF!important;}

.Skin .TE .ML .InputText, .Skin .TE .SL .InputText, .Skin .TE .ESTB .InputText  {
    border: 2px solid #000000 !important;
    background: #00000;
    color: #00000;
    border-radius: 25px;
}

::placeholder {
 font-size: 32px;
color: #0000; 
}

.Skin label.SingleAnswer.q-checked.q-focused>span::before{border:2px solid #00000!important; background-color:#4592FF!important;}

.LabelWrapper, .QuestionText, .SubQuestionText, .AnswerText{
color:#00000!important;
}

.Skin .InputText,
input[type=text] {
background-color : #ffffff !important;
border-radius: 2px !important;
border: solid 1px #000000!important;
color:#00000!important;
}

 

1 reply

O
QPN Level 5 ●●●●●
Forum|alt.badge.img+21
  • omkarkewat
  • QPN Level 5 ●●●●●
  • 306 replies
  • August 25, 2023

 Hi @justinerosey, here’s the updated code with a more improved structure. Also you were using bg: #00000, instead it should be #000000. 


/* Customize radio buttons */
.Skin label.MultipleAnswer>span::before,
.Skin label.SingleAnswer>span::before {
  border: 2px solid #000000 !important;
}

/* Customize selected radio buttons */
.Skin label.MultipleAnswer.q-checked>span::before,
.Skin label.SingleAnswer.q-checked>span::before {
  border: 2px solid #000000 !important;
  background-color: #4592FF !important;
}

/* Customize text inputs */
.Skin .TE .ML .InputText,
.Skin .TE .SL .InputText,
.Skin .TE .ESTB .InputText,
input[type=text] {
  border: 2px solid #000000 !important;
  background: #000000 !important; /* Changed from #00000 */
  color: #ffffff !important; /* Changed from #00000 */
  border-radius: 25px !important;
}

/* Customize placeholder text */
::placeholder {
  font-size: 32px;
  color: #000000; /* Changed from #0000 */
}

/* Customize focused radio buttons */
.Skin label.SingleAnswer.q-checked.q-focused>span::before {
  border: 2px solid #000000 !important;
  background-color: #4592FF !important;
}

/* Customize text color for various elements */
.LabelWrapper,
.QuestionText,
.SubQuestionText,
.AnswerText {
  color: #000000 !important;
}

/* Customize text inputs and input type text */
.Skin .InputText,
input[type=text] {
  background-color: #ffffff !important;
  border-radius: 2px !important;
  border: solid 1px #000000 !important;
  color: #000000 !important;
}


Terms & ConditionsAccessibility statement