title: Replace input file with my own button in the form
body: <p>Basicly I want to hide the input file and use a button to choose a file in the form.<br />
  If I use <code>&lt;label for=&quot;input-file&quot;&gt;Label&lt;/label&gt;</code> when I click the label i get to choose a file, but I would like to be a button or at least to look like a button.<br />
  Here is a <a href="https://jsfiddle.net/yyhn7dL4/" rel="nofollow noreferrer">code sample in JSFiddle</a> :</p>
  <pre><code>input[type=file] { display: none; }
  
  &lt;form&gt;
      &lt;input type=&quot;file&quot; id=&quot;input-file&quot;&gt;
      &lt;label for=&quot;input-file&quot;&gt;
          &lt;button&gt;Button&lt;/button&gt;
      &lt;/label&gt;
      &lt;input type=&quot;submit&quot;&gt;
  &lt;/form&gt;
  </code></pre>
  <p>If I but a button in the label, it acts as a submit button, if I specify its type it does nothing on click.</p>
  <p>Is there any way to have upload a file in the form using my button or a button looking control instead of using the <code>input type=&quot;file&quot;</code>?<br />
  It must be a HTML-CSS solution, no JS or any framework.</p>
  <p><strong>EDIT:</strong></p>
  <p>This CSS code appears to make the <code>label</code> look like a standard button :</p>
  <pre class="lang-css prettyprint-override"><code>label {
      appearance: button;
      -moz-appearance: button;
      -webkit-appearance: button;
      text-align: center;
      padding: 2px 6px 3px;
      border: 2px outset buttonface;
      font: 13.3333px Arial;
  }
  </code></pre>