I've been trying to change the color of the icon background on the calendar component. It's on blue by dafault and I would like it to be gray.
<Calendar id="icon" placeholder="Check-out" v-model="checkOutDate" :showIcon="true" style="width: 10rem;"/>
Any idea how can I do this?
Change color of Calendar icon
-
- Posts: 84
- Joined: 06 Sep 2022, 08:59
Hi, You can check this document. Local styling should solve your problem. https://www.primefaces.org/primevue/theming
I managed to do it by adding a style scoped on to my component to target the icon
Code: Select all
<style scoped>
:deep(.p-icon) {
color: #3a82f6;
}
</style>
-
- Posts: 84
- Joined: 06 Sep 2022, 08:59
This is also a preferred solution. However, we can now customize all components using pt (pass-through). I'm sharing an example for the calendar icon below.Spyabo wrote: ↑16 Aug 2023, 11:10I managed to do it by adding a style scoped on to my component to target the iconCode: Select all
<style scoped> :deep(.p-icon) { color: #3a82f6; } </style>
https://stackblitz.com/edit/kskffi?file=src%2FApp.vue
-
- Information
-
Who is online
Users browsing this forum: No registered users and 3 guests