title: Styling input file in contact form 7
body: <p>I'm trying to replace that old input file with something modern that i designed in the fiddle. However since i'm using WP contact form 7 is integrated into theme and the only way i can edit it is via this code - </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;label&gt;  
      [text* your-name placeholder "Your Name (required)"] &lt;/label&gt;
  
  &lt;label&gt;  
      [email* your-email placeholder "Your email (required)"] &lt;/label&gt;
  
  &lt;label&gt; 
      [text your-subject placeholder "Subject"] &lt;/label&gt;
  
  &lt;label&gt; 
      [textarea your-message placeholder "Your Message"] &lt;/label&gt;
  [file file-442 limit:10485760 filetypes:doc|pdf|csv class:cv]
  
  [submit "AHOI!"]</code></pre>
  </div>
  </div>
  </p>
  
  <p>So is there a way to replace this last input where the file is with my input and hide original input? This is my input</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-css lang-css prettyprint-override"><code>input[type="file"] {
    display: none;
  }
  
  .custom-file-upload {
    border: 1px solid currentColor;
    color: #083a50;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    line-height: 1;
    padding: 0.5em 2em 0.25em 1em;
    user-select: none;
  }
  
  .upload {
    height: 1.75em;
    margin-right: 0.5em;
    padding-bottom: 0.25em;
    width: auto;
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label for="file-upload" class="custom-file-upload"&gt;
      &lt;img class="upload"src="http://www.plaforma.me/wp-content/uploads/2018/04/SEND-FILE-IKONICA.png" width="300" height="53" alt=""&gt; Select File
  &lt;/label&gt;
  &lt;input id="file-upload" type="file" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Don't know why here doesn't load icon next to text but there is icon, so anyone got idea how could i replace original in contact form 7?</p>