Style first option of each row in matrix questions | XM Community
Skip to main content
Solved

Style first option of each row in matrix questions

  • June 6, 2023
  • 3 replies
  • 138 views

JohannesCE
Level 6 ●●●●●●
Forum|alt.badge.img+12

Hi! In a previous question, I had to syle the first option of MC question in the Simple Layout (Different look "don't know" option in Likert MC question in Simple Theme | XM Community (qualtrics.com)). Now I need to do the same but for matrix questions in the Classic Layout. The goal is to make the radio button of the first option of each row square and light gray. Something like this:

 

 

Best answer by ArunDubey

you can try below CSS.

<style>
td:nth-child(2) .q-radio {
-webkit-border-radius: 0% !important;
border-radius: 0% !important;
}
</style>

 

 

 

3 replies

ArunDubey
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+41
  • QPN Level 8 ●●●●●●●●
  • Answer
  • June 6, 2023

you can try below CSS.

<style>
td:nth-child(2) .q-radio {
-webkit-border-radius: 0% !important;
border-radius: 0% !important;
}
</style>

 

 

 


JohannesCE
Level 6 ●●●●●●
Forum|alt.badge.img+12
  • Author
  • Level 6 ●●●●●●
  • June 6, 2023

Thank you @ArunDubey. Follow-up question: so I tweaked your CSS to make it work in the Custom CSS editor under Style. But I was wondering why one would want to put it anywhere else?

/* make the first option in all matrix questions square and gray*/
td:nth-child(2) .q-radio {
    -webkit-border-radius: 0% !important;
    border-radius: 0% !important;
    background-color: lightgray !important;
}

td:nth-child(2) .q-checked {
    background-color: #30B3AF !important;
}

 


ArunDubey
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+41
  • QPN Level 8 ●●●●●●●●
  • June 6, 2023

Actually the provided CSS is for specific question. if you don’t have none option in any other matrix question then you can paste it directly into required question’s question text. but you want to do this in all question then you can paste under look and feel option like you already did.