title: How to style file input?
body: <p>Ok so I got the following:
  <a href="https://i.stack.imgur.com/ZV7qn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZV7qn.png" alt="enter image description here"></a></p>
  
  <p>What I want to do is to make the button which says "Elegir archivos" to be orange like the button that says "Finalizar" and make the text the file-input produces grey like the text which says "Formatos aceptados". 
  Here's what I tried:</p>
  
  <pre><code>       &lt;tr&gt;
                          &lt;td  class="upload-pic"&gt;&lt;input class="file-submit" type="file" name="fileUpload" size="50" multiple="multiple"/&gt;&lt;/td&gt;
         &lt;/tr&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.file-submit {
      height: 35px !important;
      width: 300px !important;
      padding: 5px !important;
      font-size: 15px !important;
      margin-right: 10px !important;
      margin-top: 10px !important;
      margin-bottom: 20px !important;
      background-color:red;
  }
  
  input[type="file"] {
      width: 80%;
      color: white;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      background-color: #FD8907;
      margin-left: 10px;
      float: right;
  }
  </code></pre>
  
  <p>What I want: The button which says "Elegir archivos" has to be orange with its text in white. The text next to it which says "No se eligio archivo" has to be grey with the white background. For some reason everything ends up in a big orange box and the button still looks like the default one.</p>