multiple customized checkbox

deer

I am trying to create an array of customized checkbox with different background image.I tried to implement it in vue & it worked but I don’t know how to do it in quasar.
Here is my code for vue:

<template>
      <div v-for="arr in myArray" :key="arr.bgColor" class="q- 
        pa-sm flex" >
        <input  type="checkbox" name="fordCheckBox" 
          :id="arr.bgColor" v-model="arr.checked">
        <label :class="arr.bgColor" :for="arr.bgColor" ></label>
        <label>{{arr.checked}}</label>
      </div>
</template>
<script>
export default {
  name: 'PageIndex',
  computed:{
  },
  data(){
return{
  myArray:[
    {
      bgColor:'green',
      checked:false
    },
     {
      bgColor:'blue',
      checked:false
    },
     {
      bgColor:'red',
      checked:false
    }

  ]
}
  }
}
</script>
<style scoped >

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
  background:var(--color);
    display:inline-block;
    padding: 0 0 0 0px;
    height: 45px;
    width: 45px;
    background-size: 50%;
}
input[type=checkbox] + label.green{
--color:url('/green.png') no-repeat;
}
input[type=checkbox] + label.blue{
--color:url('/blue.png') no-repeat;
}
input[type=checkbox] + label.red{
--color:url('/red.png') no-repeat;
}

input[type=checkbox]:checked + label {
    background: var(--color);
    height: 45px;
    width: 45px;
    display:inline-block;
    background-size: 50%;
}
input[type=checkbox]:checked + label.green{
  --color:url('/green-checked.png') no-repeat;

}
input[type=checkbox]:checked + label.blue{
  --color:url('/blue-checked.png') no-repeat;
}
input[type=checkbox]:checked + label.red{
  --color:url('/red-checked.png') no-repeat;
}
</style>

I’d like to know how I can call the quasar tag names in this css.

beets

@deer Is something like this what you’re trying to do? https://codepen.io/pianopronto/pen/abBNBmv?editors=101

deer

@beets thanks for your answer but firstly I want the checkboxes to have their color even before being checked.Second I am not gonna use red , green or blue, I need to use other colors with HEX format.That’s why I used image as background.

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:)

No More Posting New Topics!

multiple customized checkbox