-1

enter image description here

Hi, I want to eliminate the blue border that is displayed after clicking the button, I have already try to target it with

::ng-deep{
  .ngb-dp-arrow > button:active {
   border: none !important;
}

But nothing seems to work, I already change the color of chevron with that approach so I'm placing my css in the correct place (component itself)

Link to reproduce: https://stackblitz.com/edit/angular-er2bdu?file=src%2Fapp%2Fdatepicker-popup.css

Jeyson Mg
  • 150
  • 1
  • 6

1 Answers1

1

You should be able to use the following CSS to remove the borders:

::ng-deep .ngb-dp-arrow-btn:focus {
  outline: 0 !important; // remove the darker blue border
  box-shadow: none !important; // remove the light blue border
}

There are 2 borders that appear with the :focus pseudo selector:

  • a darker blue border - can be removed by setting outline to 0
  • a light blue box border - can be removed by setting box-shadow to none

Please see this Stackblitz for a working demo.

Ian A
  • 5,622
  • 2
  • 22
  • 31
  • Thank you! this worked perfectly, could I know where you looked for the right class ? given its not in the official documentation – Jeyson Mg Apr 22 '21 at 15:05
  • I inspected the DOM using Chrome's developer tools and selected the `:focus` psuedo selector so I could see what styles were applied to the element when it had focus – Ian A Apr 23 '21 at 11:14