How to style contact form 7 file input buttons

Question

I can't seem to target the button for up loading a file within contact form 7. How can I target the choose file button so I can add a background-color etc. Oh I am also doing this is WordPress incase you need to know that. So in the backend it looks like this;

<label class="form_label"> Your Name<span>*</span>
[text* your-name]</label>

<label class="form_label"> Your Email<span>*</span>
[email* your-email]</label>

<label class="form_label">Tel
[tel tel]</label>

<label class="form_label">CV<span>*</span>
[file cv id:upload]</label>

<label class="form_label">Cover Letter
[textarea your-message]</label>

[submit "Send"]

My output html looks like below.

 <div role="form" class="wpcf7" id="wpcf7-f47-o1" lang="en-US" dir="ltr"> <div class="screen-reader-response"></div> <form action="/Lester_Goddard_New/#wpcf7-f47-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="47" /> <input type="hidden" name="_wpcf7_version" value="4.9" /> <input type="hidden" name="_wpcf7_locale" value="en_US" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f47-o1" /> <input type="hidden" name="_wpcf7_container_post" value="0" /> </div> <p><label class="form_label"> Your Name<span>*</span><br /> <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span></label></p> <p><label class="form_label"> Your Email<span>*</span><br /> <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span></label></p> <p><label class="form_label">Tel<br /> <span class="wpcf7-form-control-wrap tel"><input type="tel" name="tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" /></span></label></p> <p><label class="form_label">CV<span>*</span><br /> <span class="wpcf7-form-control-wrap cv"><input type="file" name="cv" size="40" class="wpcf7-form-control wpcf7-file" aria-invalid="false" /></span></label></p> <p><label class="form_label">Cover Letter<br /> <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span></label></p> <p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p> <div class="wpcf7-response-output wpcf7-display-none"></div> </form> </div>

Answer 1

I had to change visibility:hidden; by opacity:0;

according to https://www.quirksmode.org/dom/inputfile.html so to the button continues to work otherwise the click didn't prompt the browse.

Answer 2

You cannot style the button of file upload like any button, instead you may use pseudo element to cover the button and apply style to it. You may try something like this. You can change the content and the style of the "new" button like you want :

 span.cv { position:relative; } span.cv:before { content:"Upload file"; position:absolute; left:0; padding:5px; background:red; color:#fff; width:130px; text-align:center; border-radius:5px; cursor:pointer; } span.cv>input { visibility:hidden; }

 <div role="form" class="wpcf7" id="wpcf7-f47-o1" lang="en-US" dir="ltr"> <div class="screen-reader-response"></div> <form action="/Lester_Goddard_New/#wpcf7-f47-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="47" /> <input type="hidden" name="_wpcf7_version" value="4.9" /> <input type="hidden" name="_wpcf7_locale" value="en_US" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f47-o1" /> <input type="hidden" name="_wpcf7_container_post" value="0" /> </div> <p><label class="form_label"> Your Name<span>*</span><br /> <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span></label></p> <p><label class="form_label"> Your Email<span>*</span><br /> <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span></label></p> <p><label class="form_label">Tel<br /> <span class="wpcf7-form-control-wrap tel"><input type="tel" name="tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" /></span></label></p> <p><label class="form_label">CV<span>*</span><br /> <span class="wpcf7-form-control-wrap cv"><input type="file" name="cv" size="40" class="wpcf7-form-control wpcf7-file" aria-invalid="false" /></span></label></p> <p><label class="form_label">Cover Letter<br /> <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span></label></p> <p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p> <div class="wpcf7-response-output wpcf7-display-none"></div> </form> </div>