background color in multiple answer question | XM Community
Skip to main content
Solved

background color in multiple answer question

  • August 8, 2022
  • 1 reply
  • 520 views
E
QPN Level 4 ●●●●
Forum|alt.badge.img+8

I have css to avoid the grey background in multiple answers, but the questions go back to white color when you select another option instead of keep the color.
I'd like the selected answers to keep the higlighted color.

This is my CSS so far:
.Skin label.MultipleAnswer {
  color: #000000 !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: #000000 !important;
  background-color: #ffff !important;
}


/*change colors of selected answer choices*/

.Skin label.MultipleAnswer.q-checked.q-focused {
  color: #ffffff !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: #663399 !important;
  background-color: #663399 !important;
}

Best answer by Tom_1842

Hi there, right now the code is only keeping the background purple while the selected item is focused, so right on selection. When it is not focused, it reverts to the white background. To keep the background purple when not focused, adding some CSS without the focused bit should work:
.Skin label.MultipleAnswer {
  color: #000000 !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: #000000 !important;
  background-color: #ffff !important;
}

.Skin label.MultipleAnswer.q-checked {
  color: #ffffff !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: #663399 !important;
  background-color: #663399 !important;
}

.Skin label.MultipleAnswer.q-checked.q-focused {
  color: #ffffff !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: #663399 !important;
  background-color: #663399 !important;
}

    1 reply

    Tom_1842
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+28
    • Tom_1842
    • Level 8 ●●●●●●●●
    • Answer
    • August 9, 2022

    Hi there, right now the code is only keeping the background purple while the selected item is focused, so right on selection. When it is not focused, it reverts to the white background. To keep the background purple when not focused, adding some CSS without the focused bit should work:
    .Skin label.MultipleAnswer {
      color: #000000 !important;
      border-style: solid !important;
      border-width: 2px !important;
      border-color: #000000 !important;
      background-color: #ffff !important;
    }

    .Skin label.MultipleAnswer.q-checked {
      color: #ffffff !important;
      border-style: solid !important;
      border-width: 2px !important;
      border-color: #663399 !important;
      background-color: #663399 !important;
    }

    .Skin label.MultipleAnswer.q-checked.q-focused {
      color: #ffffff !important;
      border-style: solid !important;
      border-width: 2px !important;
      border-color: #663399 !important;
      background-color: #663399 !important;
    }

    Terms & ConditionsAccessibility statement