title: How to change the calendar icon of an input type date?
body: <p>I want to know how can I change the calendar logo without using jquery?</p>
  
  <p>I want it to look like in the picture:</p>
  
  <p><a href="https://i.stack.imgur.com/G06iZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G06iZ.png" alt="this is the image"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> input
   {
          width: 50%;
          padding: 8px;
          border-radius: 10px;
          margin-bottom: 5%;
          border: 1px solid #CCCCCC;
          font-size: 13px;
      }
    
    
    
    .fecha input[type="date"]::-webkit-calendar-picker-indicator
    
      {
          color: rgba(0, 0, 0, 0);
          opacity: 1;
          background-image: url("./../some-folder/some-file.svg");
          background-repeat: no-repeat;
          background-position: 100% center;
          background-size: 20px;
          cursor: pointer;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-row fecha"&gt;
         &lt;div class="col-12"&gt;
           &lt;input placeholder="Fecha de Inicio"  type="text" onfocus="  (this.type='date')" onblur="(this.type='text')"&gt;
           &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>but I don't like how it looks, it doesn't look like the picture.</p>
  
  <p>I am working with bootstrap4 (without Jquery) and sass</p>