p-calendar stylization

UI Components for Angular
Post Reply
Posts: 6
Joined: 17 Jan 2019, 10:17

17 Jan 2019, 15:21

I want to stylize the input box on the p-calendar. I want to keep it blue when there is interaction with the control and gray when there isn't. So far I have managed to do it, but when I click the arrow for next month the focus is lost and the control is gray. If I select year/month from the dropdown the focus is preserved and the stylization is ok. Is there any way to stylize the input box when the calendar is open? https://imgur.com/a/WYQvarc

Using this in the CSS styles the field when there is focus in the control. But after clicking on an arrow the focus is lost

::ng-deep .ui-calendar.ui-calendar-w-btn:focus-within .ui-inputtext {
border-left: 1px solid #0FB4E1;
border-top: 1px solid #0FB4E1;
border-bottom: 1px solid #0FB4E1;
background-color: #F6FAFB;

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest