how to use linear-gradient in an array of colors

[deer]

I actually faced a problem regarding creating customized checkbox. I created different checkboxes with different background color now I want to make one of my checkboxes to have multiple colors with linear-gradient.I don’t know how to give that value to my checkbox. In this code you can see I try to give the fourth checkbox a linear-gradient value but it seems the app can not distinguish that. Can you please help me how to solve this issue?
Thanks in advance for your help.

[Ilia]

@deer Did you check this part of code? Is hash sign concatenating with linear-gradient?

[deer]

@ilia I changed that via ternary operator & defining new variable , but still it does not work.Here is the Link
But it still does not work!

[Ilia]

@deer Do css instead

https://codepen.io/pikil/pen/BaQxKmj

.q-checkbox.ch-grad .q-checkbox__inner .q-checkbox__bg {
  background: linear-gradient(90deg,#f24949 25%,#f2cf00 0,#f2cf00 50%,#8bd12a 0,#8bd12a 75%,#36c 0);
}

[deer]

@ilia The thing is, I want to keep the different colors of other checkboxes & for the last one I need linear-gradient.But in your solution , you removed the customization for other checkboxes.

[Ilia]

@deer Yes, I didn’t want to re-create your whole example (time consuming), but I am pretty sure you can combine my and your version to get the working example
I believe in you!