[Resolved] Styling file upload button

[Max]

Hey Tom and Leo

The current site I am developing is a flat design including the buttons.

I am using CF7 with file upload field on three forms that create the core of the site.

I need to restyle the ugly button.

I am aware that it has a different format depending upon your browser.

I have spent days searching the internet for a decent JS css solution. But have not found any.

Any help you could provide would be appreciated greatly at my end.

Kind Regards

Max

[Leo]

Hi there,

Here are some button style you can try: https://docs.generatepress.com/article/adding-buttons/

[Max]

No gold star for you on this one Leo.

You do not understand the complexity of this question

Not after the css.

I am after how to style it.

Kind Regards

Max

[Leo]

Maybe you can explain a bit more or link us to your site?

Have you asked CF7’s support for this complex question?

[Max]

Sure I will provide you with a link to the site.

Should I email it to the support address or do you have another.

Kind Regards

Max

[Leo]

Always use Account Issue here: https://generatepress.com/contact/

Have you contacted CF7 by the way? Sounds like it’s more related to them.

[Max]

Leo

I have sent you an email marked to your attention with the link to a test site and your log in credentials.

Thanks for you assistance.

Kind Regards

Max

[Leo]

Maybe something like this would help: https://stackoverflow.com/questions/572768/styling-an-input-type-file-button

If not then you would need to contact their support.

[Max]

Hey Leo

Solution works to hide the file input element (as long as prefixed for cf7)

and the button created via a label activates the browse window, so that you can select a file.

But the name of the selected file is not displayed.

Also I don’t know how you can interate the html label with the CF7 shortcode that includes mb upload limit and file types and the individual file class that enables CF7 to send you an email with the uploaded file attached. See link below for more details

https://contactform7.com/file-uploading-and-attachment/

[Leo]

So have you contacted CF7?

I would think you are not the first one to ask this question and they should be able to help.

[Max]

https://wordpress.org/support/topic/styling-the-upload-button/

[Leo]

Awesome!

[Max]

Your easy to impress…

[Author]

Posts