File Upload – Style the "Choose File" button

Hi Gary,

So you can use CSS for this:-

#wpcf7-f22561-p15431-o1 .wpcf7-file{
width:387px;
height:35px;
display:block;
text-indent:-9999em;
background:url(images/browse.png) no-repeat;
border:0;
cursor:pointer;
}

You will need to create and image for this to work.

Please check the width and height as per your image.

This is easiest way to change this.

Hi Gaurav, thanks for the feedback. I have attached a link to a screenshot of the look and layout I am trying to achieve:

https://www.complexus.co.za/wp-content/uploads/2016/04/Choose-File-Image-Layout.png

I tried the css you sent, but it does not allow me to style the “No File Chosen” message. I would like to hide that or add some padding to it as it currently sits on top of the image.

Thanks
Gary

You will need the same class as above and make the image.

Here is a more fine solution. You’re wellcome

How-to-customize-and-display-file-upload-button-for-a-contact-form-7-plugin-using-css-and-jquery