title: How to remove the default icon of the input field "date" while still retaining its functionality?
body: <p>I'm working on a form for my website and I have two input fields which are dates. I wanted to have a particular placeholder, so this is how I achieved that:</p>
  <pre><code>&lt;label for=&quot;check-in&quot; id=&quot;check-in-label&quot;&gt;&lt;/label&gt;
  &lt;input type=&quot;text&quot; placeholder=&quot;Check In&quot; id=&quot;check-in&quot; name=&quot;check-in&quot; class=&quot;form-control&quot; onfocus=&quot;(this.type='date')&quot;&gt;
  
  &lt;label for=&quot;check-out&quot; id=&quot;check-out-label&quot;&gt;&lt;/label&gt;
  &lt;input type=&quot;text&quot; placeholder=&quot;Check Out&quot; id=&quot;check-out&quot; name=&quot;check-out&quot; class=&quot;form-control&quot; onfocus=&quot;(this.type='date')&quot;&gt;
  </code></pre>
  <p>However, I also added svgs to those input fields, so I realized I needed to get rid of the default calendar icon that the &quot;date&quot; type comes with. I achieved this with CSS:</p>
  <pre><code>input[type=&quot;date&quot;]::-webkit-inner-spin-button,
  input[type=&quot;date&quot;]::-webkit-calendar-picker-indicator {
      display: none;
      -webkit-appearance: none;
  }
  </code></pre>
  <p>This works as it deletes the icon however, I would still like to have the calendar pop up without the icon.</p>
  <p>So this is what it looks like now:</p>
  <p><a href="https://i.stack.imgur.com/GeAgK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GeAgK.png" alt="enter image description here" /></a></p>
  <p>And when I click on the input field, this is what I get:</p>
  <p><a href="https://i.stack.imgur.com/OXImV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OXImV.png" alt="enter image description here" /></a></p>
  <p>I would like it for to appear like this once you click on the input field but without the default icon:</p>
  <p><a href="https://i.stack.imgur.com/ekgbn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ekgbn.png" alt="enter image description here" /></a></p>
  <p>How can I achieve this? Thank you in advance!</p>
  <p>I tried to do this with CSS:</p>
  <pre><code>input[type=&quot;date&quot;]::-webkit-calendar-picker-indicator {
      background: transparent;
      bottom: 0;
      color: transparent;
      cursor: pointer;
      height: auto;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      width: auto;
  }
  </code></pre>
  <p>and it causes only ONE of the input fields to show the calendar without the icon however it requires a double click and also makes the calendar not go away regardless of clicks.</p>