Styled Date Input

About this layout

A date picker field with custom colours, rounded corners and a tinted calendar icon through the webkit pseudo-elements.

How it works

The input type date keeps the browser's native calendar picker. The CSS sets fonts, borders, radius and a focus ring on the field itself. The calendar icon is reached with the ::-webkit-calendar-picker-indicator pseudo-element, which is tinted with a CSS filter and given a hover background.

Ways to customise it

• Change the border and focus colours on .dt.
• Adjust the filter values to tint the icon a different colour.
• Set a min and max attribute to limit the dates.

Good to know

The popup calendar itself cannot be restyled in most browsers, which keeps it accessible. The indicator pseudo-element works in Chromium and Safari, and Firefox shows its own icon.

Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.