title: How to show calendar popup when input[type="date"] is on focus
body: <p>Is there a way to activate the native HTML5 date picker dropdown on focus of an input element?</p>
  
  <p>Large Input Element:</p>
  
  <p><img src="https://i.stack.imgur.com/xPH42.png" alt="Large Input[type=date] Element"></p>
  
  <p>Currently I can only utilize the calendar on click of an arrow at the far right side of the input element.</p>
  
  <p>Large Input Element Click of Arrow</p>
  
  <p><img src="https://i.stack.imgur.com/KeiLx.png" alt="Large Input[type=date] Element onClick of Arrow"></p>
  
  <p>I would like to activate this calendar on focus of the input element.</p>
  
  <p>Here is the code in question.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Test&lt;/title&gt;
    &lt;/head&gt;
    &lt;style media="screen"&gt;
    .form-question {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 0 3rem;
      min-height: 3rem;
    }
    .form-question__title {
      color: #342357;
      font-size: 1.5rem;
      padding: 1rem;
    }
    .input-container {
      border-bottom: solid 2px #333333;
    }
    .input-container input {
      border: none;
      box-sizing: border-box;
      outline: 0;
      padding: .75rem;
      width: 100%;
    }
    &lt;/style&gt;
    &lt;body&gt;
      &lt;div class="form-question"&gt;
        &lt;div class="form-question__title"&gt;
          &lt;span&gt;Effective Date&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="input-container"&gt;
          &lt;input id="effective-date" type="date" name="effective-date" minlength="1" maxlength="64" placeholder=" " autocomplete="nope" required="required"&gt;&lt;/input&gt;
          &lt;span class="bar"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>CSS solution preferred but javascript is welcome, please no jQuery.</p>
  
  <p>Thanks in advance!</p>