multiple customized checkbox

beets

@deer Will the colors you want be known beforehand? Or are they from an API?

deer

@beets I know the colors

beets

@deer This is probably the easiest way to do it: https://codepen.io/pianopronto/pen/abBNBmv?editors=1111

And another way, but you have to predefine all the colors in a CSS file: https://codepen.io/pianopronto/pen/abBNREN?editors=1111

Edit: Note with the second way, you don’t have to define your classes as .text-deadbeef for example. It could be .text-option-a and you’d define bgColor: 'option-a' in your array. It just depends on if those colors correlate to some human friendly name or not. Hopefully one of those two examples helps.

deer

@beets thanks for your solution about using HEX colors.But the checkbox background does not have the specified color before being checked and that’s why I tried to create a label for the checkbox and then define the customization there.That is the problem

beets

@deer Updated this codepen: https://codepen.io/pianopronto/pen/abBNBmv?editors=1111

Is that what you’re looking for? If not, an image would be very helpful.

deer

@beets thank you,that’s what I mean.However,in the quasar app that I created , it seems there is a problem to render like that. I don’t know if it’s the configuration or another thing that does not render like that.
Here is the link:
github
I put the code in src/pages/index.vue

beets

@deer When using a scoped style tag, you must use deep selectors:

<style scoped >
.q-checkbox >>> .q-checkbox__inner {
  color: unset;
}
.q-checkbox >>> .q-checkbox__label {
  color: black;
}
.q-checkbox >>> .q-checkbox__inner .q-checkbox__bg {
  background: currentColor;
}
</style>

deer

@beets thank you ,that really helped I also like to know if there is a specific part in documentation that I can learn about this. So for example now for bright background checkboxes( like white or yellow background) I need to use a black or gray checkmark but I don’t know how!

beets

@deer You should be able to change the checkbox color with:

.q-checkbox >>> .q-checkbox__svg { 
  color: black 
}

There’s not really anything in the Quasar docs about any of the CSS of Vue code I wrote, it’s really just general CSS knowledge (and inspecting elements in chrome, playing with CSS rules) and the Vue docs which you should read too (since Quasar doesn’t duplicate a lot of the things in there)

deer

Hi @beets , I actually faced a problem regarding the customized checkbox. 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:)