title: Icon color of html5 input date picker
body: <p>How can I change the icon color of the native <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date" rel="nofollow noreferrer">HTML5 date input</a> (<code>&lt;input type=&quot;date&quot; /&gt;</code>)?
  Is it possible to change the calendar icon color to <code>HEX: #018bee</code> or <code>RGB: (1, 139, 238)</code>? I saw a post saying that it was possible using filters, but I was unsuccessful.</p>
  <p><a href="https://i.stack.imgur.com/rL3gn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rL3gn.png" alt="enter image description here" /></a></p>
  <p>Codepen Example:
  <a href="https://codepen.io/gerisd/pen/VwPzqMy" rel="nofollow noreferrer">https://codepen.io/gerisd/pen/VwPzqMy</a></p>
  <p>HTML:</p>
  <pre><code> &lt;input type=&quot;date&quot; id=&quot;deadline&quot; name=&quot;deadline&quot; value=&quot;2021-01-01&quot; required&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>#deadline{
    width: 100%;
    min-width: 100px;
    border: none;
    height: 100%;
    background: none;
    outline: none;
    padding-inline: 5px;
    resize: none;
    border-right: 2px solid #dde2f1;
    cursor: pointer;
    color: #9fa3b1;
    text-align: center;
  }
  
  input[type=&quot;date&quot;]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    border-radius: 4px;
    margin-right: 2px;
    filter: invert(0.8) sepia(100%) saturate(10000%) hue-rotate(240deg);
  }
  </code></pre>