Quasar checkbox issue

#vue3 #quasar #vuetify #vue

Hi , I am using quasar checkbox, when I hover on it , it shows background color , I don't want this.
It is not being remove .
Anyone who can help me .

Here is complete my component.
`
<q-select
dense
outlined
v-model="data"
@update:model-value="handleSelectionChange"
style="width: 390px"
option-value="country_name"
option-label="country_name"
use-input
dropdown-icon="expand_more"
no-error-icon
fill-input
:options="countriesList"
multiple
emit-value
map-options
@click="appendSelectAllOption"

<template v-slot:option="{ itemProps, opt, selected, toggleOption }">
  <q-item dense v-bind="itemProps" @click="toggleCountrySelection(opt)">
    <q-item-section side>
      <q-checkbox
        :model-value="selected"
        @update:model-value="toggleOption(opt)"
        unelevated
        class="no-ripple no-shadow"
        no-ripple
        dense
        @click="toggleCountrySelection(opt)"
      ></q-checkbox>
    </q-item-section>
    <q-item-section style="min-width: 25px" avatar>
      <img
        v-if="opt.country_code === 'XA'"
        height="14"
        width="14"
        lazy-src="@/assets/global.svg"
        src="@/assets/global.svg"
        loading="lazy"
      />
      <country-flag
        v-else
        size="small"
        :country="opt.country_code"
      ></country-flag>
    </q-item-section>
    <q-item-section>
      <q-item-label class="fs-12px fw-300 text-light">{{
        typeof opt === "string" ? opt : opt.country_name
      }}</q-item-label>
    </q-item-section>
  </q-item>
  <q-separator
    v-if="
      typeof opt === 'string' ||
      opt.country_code === 'XA' ||
      opt.country_code === 'select_all'
    "
  />
</template>

<template v-slot:no-option>
  <div class="d-flex justify-center items-center" style="height: 200px">
    <span class="text-grey"> No {{ label }} Found </span>
  </div>
</template>

import CountryFlag from "vue-country-flag-next";
import { ref, reactive } from "vue";
export default {
components: { CountryFlag },
props: {
countries: {
type: Array,
default: [],
},
item: {
type: Object,
default: [],
},
},
data() {
return {
data: ref([]),
options: ["Google", "Facebook", "Twitter", "Apple", "Oracle"],
selected: false,
selectAllCheckbox: false,
countriesList: reactive([]),
};
},
methods: {
handleSelectionChange(newValue) {
this.data = newValue;
},
toggleCountrySelection(country) {
if (country.country_code == "select_all") {
this.toggleSelectAll();
} else {
country.checkbox = true;
if (country.checkbox) {
// this.data.push(country);
} else {
this.data = this.data.filter(
(c) => c.country_code !== country.country_code
);
}
}
console.log("country", country);
},
toggleSelectAll() {
this.selectAllCheckbox = !this.selectAllCheckbox;
this.data = this.selectAllCheckbox ? [...this.countriesList] : [];
this.data.shift();
this.updateCheckboxValues();
this.countriesList[0].country_name =
this.countriesList[0].country_name == "Select All"
? "Unselect All"
: "Select All";
},

updateCheckboxValues() {
  this.countriesList.forEach((country) =&gt; {
    if (country.country_code != "select_all") {
      country.checkbox = this.data.some(
        (selectedCountry) =&gt;
          selectedCountry.country_code === country.country_code
      );
    }
  });
},
appendSelectAllOption() {
  const selectAllExists = this.countriesList.some(
    (country) =&gt; country.country_code === "select_all"
  );
  if (!selectAllExists) {
    let obj = {
      checkbox: false,
      country_name: "Select All",
      country_code: "select_all",
    };
    this.countriesList.unshift(obj);
  }
},

},
watch: {
data(newValue) {
this.updateCheckboxValues();
},
countries(newValue) {
this.countriesList = newValue;
},
deep: true,
},
mounted() {
this.updateCheckboxValues();
},
};

::v-deep .q-checkbox_bg,
.expansion-styling {
border: 0.83px solid #d8dbe4 !important;
border-radius: 3.33px !important;
}
::v-deep .q-checkbox_bg {
width: 12px !important;
height: 12px !important;
top: 35% !important;
}

::v-deep .q-checkbox_bg > .fit {
width: 97% !important;
height: 87% !important;
box-shadow: none !important;
}
.q-item_section {
padding-right: 0px;
}

::v-deep .q-field--auto-height.q-field--dense .q-field_control,
.q-field--auto-height.q-field--dense .q-field_native {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.q-item {
padding: 0px 8px !important;
min-height: 35px;
font-size: 14px;
}
.q-select >>> .q-field__native > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.q-menu {
max-height: 350px !important;
height: 350px !important;
}
.q-item {
padding: 0px 8px !important;
min-height: 35px;
font-size: 14px;
}

.q-checkbox.cursor-pointer:hover input[type="checkbox"] {
background-color: transparent !important;
}