Style appearance in EJ2 JavaScript Uploader control
8 May 20231 minute to read
The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.
Customizing the appearance of File Upload wrapper element
Use the following CSS to customize the appearance of wrapper element.
/* To specify height */
.e-upload.e-control-wrapper, .e-bigger.e-small .e-upload.e-control-wrapper {
height: 300px;
width: 300px;
}
Customizing the File Upload browse button
Use the following CSS to customize the File Upload browse button
/* To specify font size and color */
.e-upload .e-file-select-wrap .e-btn, .e-upload .e-upload-actions .e-btn, .e-bigger.e-small .e-upload .e-file-select-wrap .e-btn, .e-bigger.e-small .e-upload .e-upload-actions .e-btn {
font-family: cursive;
height: 40px;
background-color: aquamarine;
color: coral;
}
Customizing the File Upload content
Use the following CSS to customize the File Upload content
/* To specify font size and color */
.e-upload .e-file-select-wrap .e-file-drop, .e-bigger.e-small .e-upload .e-file-select-wrap .e-file-drop {
font-size: 20px;
color: aqua;
}
Customizing the uploaded file container in File Upload
Use the following CSS to customize the uploaded file container in File Upload
/* To specify background color */
.e-upload .e-upload-files .e-upload-file-list {
background-color: beige;
}