title: My input date in Mozilla Firefox is different with Google Chrome
body: <p>I already make a form consist of two inputs (input text and input date) and a button. I design the form in Google Chrome. </p>
  
  <p>Here it is :
  <a href="https://i.stack.imgur.com/DQR1h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DQR1h.png" alt="CHROME FORM"></a></p>
  
  <p>After I finished the form, I'm trying to open the page in Mozilla Firefox Browser and I see that the date input is not date-formatted.</p>
  
  <p>Like this : <a href="https://i.stack.imgur.com/niOqs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/niOqs.png" alt="enter image description here"></a></p>
  
  <p>This is my code</p>
  
  <pre><code> &lt;!DOCTYPE HTML&gt;&lt;HTML&gt;
      &lt;body&gt;
  &lt;!--NAVIBAR--&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-3 no-float"&gt;&lt;br&gt;
              &lt;img src="img/logo-pln-persero.png" style="height:150px; margin-top:-40px;" &gt;&lt;hr&gt;
              &lt;p class="navbar-font-gold"&gt;
                  &lt;?php 
                      $tgl_hari_ini = date('D, d M Y ');
                      echo $tgl_hari_ini;
                  ?&gt;
              &lt;/p&gt;
              &lt;div role="navigation"&gt;
                  &lt;div class="navbar-main-collapsed"&gt;
                      &lt;ul class="nav li navbar-stacked"&gt;
                          &lt;li&gt;
                      &lt;a class="page-scroll" href="home.php"&gt;
                          &lt;p class="navbar-font"&gt;HOME&lt;/p&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class="page-scroll" href="home.php?cek=logout"&gt;
                          &lt;p class="navbar-font"&gt;LOG OUT&lt;/p&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;hr&gt;
              &lt;!-- Footer Starts --&gt;
              &lt;div class="footer"&gt;
                  &amp;copy; Copyright 2015 
              &lt;/div&gt;
              &lt;!-- # Footer Ends --&gt;                          
  
          &lt;/div&gt;
  
          &lt;div class="col-md-9 no-float"&gt;
              &lt;div class="span"&gt;
                  &lt;header&gt;&lt;p class="font-header br1" align="center" style="padding-top:10px;"&gt;SISTEM PENGADAAN BARANG/JASA &lt;br&gt;UPT SULSELRABAR &lt;/p&gt;&lt;hr&gt;&lt;/header&gt;                          
                  &lt;div class="form-thumbnail"&gt;
                      &lt;form method="post"&gt;
                          &lt;h3 style="font-weight:bold" align="center"&gt;Surat Kuasa Kerja&lt;/h3&gt;
                          &lt;div class="form-group"&gt;
                              Nomor SKK:
                              &lt;input type="text" class="form-control" name="no_skk" placeholder="NO SKK" style="width:300px;"&gt;&lt;/input&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              Tanggal Masuk:
                              &lt;input type="date" class="form-control" name="tgl_skk" style="width:200px;"&gt;&lt;/input&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group" align="center"&gt;
                              &lt;button type="submit" class="btn btn-custom btn-default" name="btn_submit_skk" style="border-radius:0px"&gt; Simpan &lt;/button&gt;
                          &lt;/div&gt;  
                      &lt;/form&gt;
                      &lt;a class="page-scroll" href="kontrak-home.php?id=&lt;?php echo $id;?&gt;"&gt;
                          &lt;span class="glyphicon glyphicon-arrow-left"&gt;&lt;/span&gt;  Back
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt; 
  &lt;/body&gt; 
  &lt;/HTML&gt;
  </code></pre>
  
  <p>and my head tag is :</p>
  
  <pre><code>&lt;head&gt; 
      &lt;title&gt;Edit Surat Kuasa Kerja&lt;/title&gt; 
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; 
  
      &lt;!-- Bootstrap --&gt; 
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt; 
  
  
      &lt;style&gt;
          *
          {
              margin:0;padding:0;
          }
  
          html,body,.container
          {
              height:100%;
          }
  
          .container
          {
              display:table;
              width: 100%;
              margin-top: -50px;
              padding-top: 50px;
              padding-left:0px;
              padding-right:0px;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
          }
  
          .font-header{
              font-weight:bold; 
              color:gold; 
              font-size:48px; 
              line-height:50px;
          }
  
          .font-kontrak{
              font-weight:bold;
              color:black;
          }
          .font-progress&gt;a:hover{
  
          }
          .thumbnail{
              border-radius:0px 0px 0px 0px;
          }
  
          .footer {
              position:absolute;
              bottom:0px;
              background-color: #3E4095;
              height: 50px;/* or however high you would like */
              color:gold;
              font-weight:bold;   
          }
  
          header
          {
              background:#820404;
              height: 130px;
              margin-left:-15px;
              margin-right:-15px;
          }
  
  
  
          #br1
          {
              line-height:25px;
          }
          .col-md-3.no-float, .col-md-9.no-float {
              float: none; 
          }
  
          .col-md-3
          {
              display: table-cell;
              background: #3E4095;
              width: 25%;
          }
  
          .col-md-9
          {
              display: table-cell;
              width: 75%;
              height:100vh;
          }
  
  
          input[type=text]
          {
              border-radius:0px 0px 0px 0px;
          }
  
          input[type=password]
          {
              border-radius:0px 0px 0px 0px;
          }
  
          input[type=date]
          {
              border-radius:0px 0px 0px 0px;
          }
  
          .navbar-font
          {
              font-size:16px;
              font-weight:bold;   
              color:white;
          }       
  
          .navbar-font-gold{
              font-size:16px;
              font-weight:bold;   
              color:gold;
          }
  
          .nav li
          {
              line-height:15px;
          }
  
          .nav&gt;li&gt;a:hover
          {
              background-color:gold;
              width:100%;
              margin:0;
          }
  
          .p1{
              line-height: 20px;
              font-weight:bold;
              font-size:24px;
          }
          .row
          {
              height: 100%;
              display: table-row;
          }
  
          .col-special{
              column-count:2;
              -webkit-columns:2;
              -moz-columns:2;
              margin-left:6px;
          }
  
          .thumbnail{
              border-radius:0px 0px 0px 0px;
              border:none;
  
          }
  
          .form-thumbnail{
              display: table;
              background:#EEEEEE;
              margin-top:10vh;
              margin-left:40vh;
              padding-bottom:30px;
              padding-top:30px;
              padding-left:70px;
              padding-right:70px;
          }
  &lt;/style&gt;    
  &lt;/head&gt; 
  </code></pre>