CODEWITHSUNDEEP
cssvue.jsprimevue
BlueTree
BlueTree

Reputation: 111

PrimeVue: Checkbox Background

I would like to change my current checkbox background color by overriding the current default background style to red instead of white background. Here is my current template and css which I tried.

I tried to overwrite the primevue button default blue button to red and it works fine but it's not the case for primevue checkbox. Can someone help?

enter image description here

<template>
  <div>
    <h2>Test Checbox</h2>
    <div class="field-checkbox">
      <Checkbox id="test1" name="test" value="test1" v-model="test" />
      <label for="test1">Test Checkbox 1</label>
    </div>

    <div>
      <Button label="Select " icon="pi pi-check" iconPos="right" />
    </div>

  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "HelloWorld",
  setup() {
    const test = ref([]);

    return { test }
  }
});
</script>

<style scoped>
div {
  margin: 1rem 0;
}
 
.p-checkbox .p-checkbox-box  {
  background: red !important;
  color: red !important;
}

.p-checkbox .p-checkbox-box.p-highlight {
  border-color: red !important;
  background: red !important;
}

.p-button {
  background: red;
}
</style>

enter image description here enter image description here

Upvotes: 2

Views: 2571

Answers (2)

Lee Goddard
Lee Goddard

Reputation: 11173

Because you are using style scoped, the rules you specify are specific to the scope of the elements you define in your component -- and the PrimeVue elements are not defined in your element. To reach the PrimeVue elements, use the [deep][1] selector:

:deep( .p-checkbox ) {
   /* ... */
}

But as @Hirusha Cooray answers, if this re-style is not a one-off, do it once, globally, in the base style definitions for the project.

  [1]: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Upvotes: 0

Hirusha Cooray
Hirusha Cooray

Reputation: 31

I faced a similar issue before. The scope attribute is causing the issue. An alternative solution would be, you can add a class to the component and then use that class to add styles specific to that component. Here is the CSS to change the color of PrimeVue checkbox component. Hope this will be helpful for someone.

<style>
div {
  margin: 1rem 0;
}

.p-button {
  background: red !important;
}

.p-checkbox .p-checkbox-box.p-highlight,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
  border-color: red !important;
}

.p-checkbox .p-checkbox-box.p-highlight,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
  background: red !important;
}

.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
  box-shadow: 0 0 0 0.05rem rgb(253, 96, 96) !important;
}
</style>

Upvotes: 3

Related Questions