How to style file upload buttons on your online forms?

How to style file upload buttons on your online forms?

To style file upload buttons on your online form, access the form’s settings and go to the Themes section. Afterwards, click on the Use custom CSS link and add this class to style the file upload button: .fileinput-button

Below are some examples:

Example 1. To change the color of the file upload button:

.fileinput-button {background: #8D8DFF;} 
  • Replace #8D8DFF with the code corresponding to the color you want.

custom file upload

Example 2. To change the font of the text displayed within the file upload button:

.fileinput-button {font-family:font_style;}
  • Replace font_style with the family you want to use (e.g. font-family: ‘Courier New’, Courier, monospace;).

custom file upload

Example 3. To change the file upload button with another one from an URL:

.fileinput-button {content: url('//mydomain.com/upload.png');
 border-bottom: 0px; border-right: 0px; border-left: 0px; border-top: 0px;}
  • Replace //mydomain.com/upload.png with the URL where your image is located.
  • The border tags are used to remove the borders of the button, in case you do not require them.

custom file upload

For assistance, don’t hesitate to contact us at support@123formbuilder.com or via our contact form.

Olivian Stoica
Olivian Stoica
Oli's enthusiasm for helping our fellow users led him to write thorough know-how articles and tutorials that would make form building a bliss on 123FormBuilder.

Leave a Reply

Your email address will not be published. Required fields are marked *