Style the file upload button in Elementor forms and CSS

In this tutorial, we will see how to style the file upload button in Elementor forms using CSS. Make that ugly, outdated ‘Choose file’ button much nicer, change the color and the font, remove the border, adjust the border radius and much more!

Check the video below or continue reading this post!

We will first assign a class to our form to make these changes only to one or selected forms (not ALL the forms on our website). Then, using a few lines of code, we will target and change our file upload button. So let’s get started!

Start by creating a form using a form widget

First, use a ‘form’ widget to insert your form. Head over to the ‘Content’ section of the widget and add a few basic simple fields. I am adding text fields for name, email and message, but you can add any fields you like. Then add another field and in the ‘Type’ dropdown, select ‘File upload’. Click on ‘Update’ button to save your changes.

Now is the time to add CSS code and do some styling. I am using Elementor Pro, that you can purchase by linking on the banner below, but I am still adding my code using a CSS plugin.

Install and activate the plugin for the CSS code

I am using a Simple Custom CSS and JS plugin to insert my custom CSS code. It is very easy to use and completely free!

You can check one of my previous posts on best WordPress plugins featuring this CSS plugin as well.

Add a CSS class to your form

Once you install and activate the plugin, go to your form and switch to the ‘Advanced’ tab. In the ‘CSS classes’ field within the ‘Layout’ section, assign a CSS class name to this form.

This can be any name you want, just make sure NOT to include a dot (“.”) at the beginning or any spaces. I am using the name ‘upload-form’. After this, click on ‘Update’ to save the changes.

The reason to use a CSS class for your form is to simply be able to apply the following changes and styling ONLY to this particular form or any form that you give this class to. That way you can control the styling and the look of multiple forms directly from CSS, from a single place. Also, maybe you will have different forms on your page that you want to look differently, so you can easily control this by assigning them different classes and styling them differently in CSS.

Start adding the CSS code

To change the style of your upload button, simply add the following CSS code below in your CSS plugin. Don’t forget to change the ‘upload-form’ name to any class name that you gave to your form in the steps above.

.upload-form .elementor-field-type-upload input[type="file"]::file-selector-button {
    border: 0px solid #CCC;
    border-radius: 20px;
    background-color: #f0f0f0 !important;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    margin-right: 15px;

You can change the border, border-radius (to make the button with rounded corners), padding, play with the background-color and fonts to achieve the result you want. The margin-right value simply creates a bit of spacing between the button that says ‘Choose file’ and the ‘No file chosen’ label on the right.

That’s it!

Now you can simply apply the form class to multiple forms on your website and all this styling will automatically apply to all of them. And the best part is that you can control and change the styling from a single place in your CSS plugin!

Download Elementor Pro here.

*This post may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale, with no extra cost to you. That way you are supporting my blog and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.

Share this post:

Leave a Comment

Related posts:

General instructions:

  1. Open the exercise in your browser and read the task and the content on the left side of the screen. 
  2. You will be editing the content on the right side of the screen.
  3. In order to do that, right click on the exercise page that you opened and go to ‘Inspect’.
  4. Go to ‘Sources’ in the top bar and if you cannot see an empty CSS sheet where you can type the code, press Ctrl + P and start typing ‘styl’ in the search bar. Then press enter to open the CSS sheet.
  5. Follow the notes on the left and start typing your CSS code to see the changes online!
  6. Important! Do not refresh the page while you are editing the code, as these changes are in preview mode only and you can see them immediately, as soon as you write a line of functioning code.
  7. Use the custom classes in the notes on the left side of the screen, as well as ‘Elements’ on the top bar of the ‘Inspect’ to target and style the classes and elements. For example, you can enable the small icon on the top left of the ‘Inspect’ window (‘Select an element in the page to inspect it’) to find the default class name of the element you want to edit, while you are in the ‘Elements’ tab.


  1. If the code is not showing any changes, try adding the !important tag at the end of the line before closing it (before the “;” symbol) and see if it works then.
  2. Don’t forget there are usually more ways to achieve the same result. Be creative!
  3. If you get stuck, write your email address in the form on the left side of the screen and you will get the solution (CSS code) in your email.


  1. You can find a lot of tutorials on my youtube channel. 
  2. Watch the tutorial on how to solve these exercises here.

Please check your email and stay tuned for updates on the course.

We will notify you shortly when it’s available for presale.