Icon file-uploads

How to change the file upload icon in ChronoForms.

Overview

The default file upload icon cannot be replaced using standard HTML in CSS.
Enable the Field Class behavior for the upload field and use custom CSS to hide the default icon and insert a new one with a properly formatted content property, such as a data URL for an SVG.

Answered
ChronoForms v8
Fl Flamingo 05 Dec, 2025

How can I change the file upload icon to image in Chronoform 8, for example using a template override or CSS?

Max_admin Max_admin 05 Dec, 2025
Answer

Enable the Field Class behavior for your field and set any class.

Then use a CSS like this one:

.field_class label svg{
display:none;
}
.field_class label::before{
// whatever css for your new image here
}

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
Fl Flamingo 06 Dec, 2025

Thank you so much for your information!

Hiding the file icon works, but I haven't been able to insert a different icon using this:

`.upload_icon_dis label::before { `content: '<svg class="fasvg icon image" xmlns="http://www.w3.org/2000/svg"</svg>';`

or similar CSS entry. What do I need to change?

Max_admin Max_admin 06 Dec, 2025

Hi Flamingo

This is not a correct content property, here is an example of a correct one:

content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/></svg>');

You can get the <svg code from Font awesome or other icon libraries.

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
Post a Reply