How to style the date html input type using CSS.

If you haven’t heard already there is a (no-so) new HTML input type used specifically for date inputs. The idea is that in the future instead of having to use a library such as jQuery, you can just invoke a simple HTML input:

   1: <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>

And it looks and feels wonderful.

Let’s see what styling we can apply to this elegant input.

1. Applying the color rule.

You can apply the color rule to the input and it works as you would expect:

   1: input {

   2:   color:red;

   3: }

2. Applying the border rule.

You can also apply the border rule but it seems this only applies to the input, not the calendar widget that appears on focus.

   1: input {

   2:   border:1px solid red;

   3: }

3. Applying the padding rule.

Padding can also be used for this input, however the calendar widget remains untouched.

   1: input {

   2:   padding:10px;

   3: }

 

So we can’t customize the look and feel of the calendar widget?

After testing this new input it seems that the browsers that support it (Google Chrome Canary and the latest Opera) do not allow you to change how the calendar looks.

Google Chrome uses this stylesheet to apply design to the input, but you won’t get any changes on the other browsers.

This is bad news as sometimes we as web developers are asked to modify existing calendar widgets to match the look and feel of the website.

Hopefully this changes in the future, we’ll keep our eyes peeled.