title: Remove input file button and style the files chosen
body: <p>I am trying to create an upload form which takes multiple images. I want to be able to <em>remove</em> the <strong>"Choose Files"</strong> button but <em>keep</em> the <strong>"No file chosen"</strong> to inform the user what files they are going to be uploading.</p>
  
  <p>I understand that I can set the opacity to 0 on the input type file styling, but this removes both the <strong>"Choose Files"</strong> and <strong>"No file chosen"</strong> text.</p>
  
  <p><a href="http://codepen.io/anon/pen/KpXyZJ" rel="nofollow">Here is the codepen of the image uploader so far.</a></p>
  
  <p>To summarise:</p>
  
  <ul>
  <li>I want to <strong>remove</strong> the Choose Files button</li>
  <li><strong>Keep</strong> the No file chosen text.</li>
  </ul>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="upload"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;h1&gt;Would you like to &lt;span style='color: lightgreen;'&gt;Upload&lt;/span&gt; or &lt;span style='color: orangered;'&gt;Delete&lt;/span&gt; a file?&lt;/h1&gt;
                  &lt;div style="position: relative; height: 275px;"&gt;
                      &lt;form action="" method="post" enctype="multipart/form-data" class="formUp"&gt;
  
                          &lt;input type="file" name="fileToUpload[]" id="fileToUpload" accept="image/*" multiple="multiple"&gt;&lt;p&gt;Click here to upload images.&lt;/p&gt;&lt;/input&gt;
                          &lt;input type="submit" value="Upload Images" name="submitUpload" /&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>.up {
      border: none;
  }
  
  .upload {
      padding-top: 6%;
  }
  
  .upload input[type='file'] {
      outline: none;
  
      width: 100%;
      height: 100%;
      position: absolute;
  }
  
  .formUp {
      border: 4px dashed black;
      width: 400px;
      height: 200px;
      position: absolute;
  }
  
  .formUp p {
      text-align: center;
      width: 100%;
      height: 100%;
      line-height: 170px;
      font-weight: bold;
      font-size: 1.5em;
  }
  
  .upload input[type='submit'] {
      margin-top: 2%;
      width: 100%;
      height: 20%;
  }
  
  .upload input[type='submit'] {
    background: #0AC986;
    dispaly: inline-block;
    width: 100%;
    font-size: 16px;
    height: 50px;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
  }
  
  .upload input[type='submit']:hover {
      color: #F37272; 
      background-color: palegreen;
  }
  
  .upload input[type='submit'] {
      -o-transition: all .3s;
      -moz-transition: all .3s;
      -webkit-transition: all .3s;
      -ms-transition: all .3s;
  }
  
  .upload input[type='submit']:hover {
      color: red;
  }
  </code></pre>