Customize File Upload Field in Elementor Forms

Written by :

Posted on :

Tags :

Share :

Facebook
Twitter
LinkedIn
Reddit
Pinterest

What This CSS Code Does:

Adds a gradient border to any element in Elementor.

Usage Examples:

How To Implement:

Click on the Advanced tab within the form element, go down to the Custom CSS option and paste the code. Make sure to add the CSS Class under Layout (it’s sampleform for this example). Make sure to reupload  the image below and modify the background image URL within the CSS code. Feel free to use this image or make your own. It’s not the nicest, sorry about that.

The Code:

				
					.sampleform .elementor-field-type-upload  {
    background-color: #fff;
    border-radius: 8px;
    height: 120px;
    width: 96%;
    box-sizing: border-box;
    max-width: 96%;
    margin: 0 auto;
    background-image: url('/wp-content/uploads/2024/03/photo_2022-12-20_01-58-41.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.sampleform .elementor-field-type-upload  .elementor-upload-field {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}
				
			

Leave a Reply

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

READY FOR A TOTALLY AWESOME WEBSITE?