Colour of radio buttons in Matrix table | XM Community
Skip to main content
Question

Colour of radio buttons in Matrix table

  • December 20, 2019
  • 2 replies
  • 125 views

KristyP
Level 2 ●●
Forum|alt.badge.img+10
Hi everyone, I know you can change the colour of the border of the radio buttons using CSS, but that is more of a global change. Is there a way to have it so that the first column is red, second column yellow, etc... Here is a pic of a test I'm trying (so ignore the text) but ideally each column of radio buttons would be a different colour: ! Not sure if that is possible or if it's a global change and that is that. Thanks! Kristy

2 replies

GeorgeIssa
Level 2 ●●
Forum|alt.badge.img+21
  • Level 2 ●●
  • December 20, 2019
Great Question. #subscribed

KristyP
Level 2 ●●
Forum|alt.badge.img+10
  • Author
  • Level 2 ●●
  • December 23, 2019
I was able to figure out a solution...might not be the best way, but seems to work. In this case I built the CSS using the cell class for the table (in my case they were c4, c5, and c6), and then targeted the appropriate label class (q-radio, etc.). My code is below...I leveraged the source CSS on the page, and then just updated the properties I wanted to change: /* First Column */ .c4 label.q-radio { border:3px solid #ff0000; width:1.1em; height:1.1em; display:inline-block; background:0 0 } .c4 label.q-radio.q-checked { background-color:#ff0000; outline:0; } /* Second Column */ .c5 label.q-radio { border:3px solid #00bbff; width:1.1em; height:1.1em; display:inline-block; background:0 0 } .c5 label.q-radio.q-checked { background-color:#00bbff; outline:0; } /* Third Column */ .c6 label.q-radio { border:3px solid #02cc2e; width:1.1em; height:1.1em; display:inline-block; background:0 0 } .c6 label.q-radio.q-checked { background-color:#02cc2e; outline:0; } So far so good, but open to suggestions :)