title: CSS for styling HTML5 date input calendar in Chrome
body: <p>Is there a way to style the calendar that pops up if you click the down arrow on a html5 date input?</p>
  
  <pre><code>&lt;form&gt;
      &lt;label for="f-duedate"&gt;Due date&lt;/label&gt;
          &lt;input id="f-duedate" type="date" name="duedate"
                 data-date-format="dd.mm.YYYY"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><img src="https://i.imgur.com/1ulgoSy.png" alt="a html5 calendar"></p>
  
  <p><a href="http://jsfiddle.net/no8a17eo/1/" rel="noreferrer">http://jsfiddle.net/no8a17eo/1/</a></p>
  
  <p>I know there are pseudo selectors for styling the input field itself:</p>
  
  <pre><code>::-webkit-datetime-edit-fields-wrapper {
  }
  ::-webkit-datetime-edit-text {
  }
  ::-webkit-datetime-edit-month-field, 
  ::-webkit-datetime-edit-day-field, 
  ::-webkit-datetime-edit-year-field {
  }
  ::-webkit-inner-spin-button {
      display: none;
  }
  ::-webkit-calendar-picker-indicator:hover {
     background:none;
  }
  </code></pre>
  
  <p><em>At the bare minimum I only need it to work on the latest version of Google Chrome</em></p>