2

When I click on the day picker component container or an individual cell within the calendar, a blue border gets added.

I couldn't find the related CSS in style.css, nor do I see any classes being added in DevTools that could be adding the blue border.

How do I get rid of this?enter image description here

neuDev33
  • 1,573
  • 7
  • 41
  • 54

2 Answers2

6

The blue "border" gets added when the DayPicker-wrapper element gets focused. It's actually the outline css property that generally gets added to any focused element unless you specify otherwise.

To remove the outline from the overall DayPicker element, add the following to the .DayPicker-wrapper class in your DayPicker component stylesheet:

.DayPicker-wrapper {
  outline: none;
}

You can also remove it from the individual days by adding {outline: none;} to the .DayPicker-Day class.

Mark McKelvy
  • 3,328
  • 2
  • 19
  • 24
5

Mark's solution works perfectly; just fyi, if you want to remove all outline (blue border) without adding multiple classes, try writing: 

.DayPicker * {
  outline: none;
}
basekays
  • 51
  • 1