Quasar checkbox issue
Tags: vue3, quasar, vuetify, vue
Published: 2023-11-21 11:48:57

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.
`<template>
  <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>
  </q-select>
</template>

<script>
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) => {
        if (country.country_code != "select_all") {
          country.checkbox = this.data.some(
            (selectedCountry) =>
              selectedCountry.country_code === country.country_code
          );
        }
      });
    },
    appendSelectAllOption() {
      const selectAllExists = this.countriesList.some(
        (country) => 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();
  },
};
</script>
<style scoped>
::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;
}
</style>

<style>
.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;
}
</style>
`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc75mghfqhf0awo2gvuz.png)