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
Page 1 / 1
Great Question. #subscribed
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
/* 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
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.