Elegant Datepicker CSS UI

A standard <input type="date"> relies on browser UI which often looks ugly. Here’s how you style a custom date picker using CSS Grid.

The Calendar Grid

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  padding: 20px;
}
.day {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}
.day:hover {
  background: #f3f4f6;
}
.day.active {
  background: #04AA6D;
  color: white;
}

Check the Live Demo to interact with this beautiful calendar component!