How can I format a file input?

The NiceFileInput jQuery plug-in

This method was suggested for ChronoForms by user BNDragon. It is a jQuery plug-in developed by Jorge Moreno Moro. See the documentation here - there is a link to the download from GitHub at the bottom of the page.

This is what the end result looks like using the settings and CSS in this FAQ - the Choose button changes color on hover and you click it to select a file. You can change the CSS, the 'Choose' label and some of the behaviours - see the script documents for more information.

a. Download the package, unzip and copy the jquery.nicefileinput.min.js file to the /components/com_chronoforms5/extras/nicefileinput folder on your site, you will need to create the folder as well.

 

b. Add a File Field element in the Designer tab of your form. Open the settings and add file nice to the Class box.

In the Setup tab add a Load JavaScript action to the form On Load event.

In the JS Code box add this code which links the format script to all inputs with the class file:, you can change the label to suit your form (as you will see this is not the same as the ChronoForms input label):

jQuery(document).ready(function (jQ) {
  jQ( '.file' ).nicefileinput({
    label: 'Choose'
  });
});

and in the JS Files box add this code which loads the JavaScript library:

<?php
echo JUri::root().'/components/com_chronoforms5/extras/nicefileinput/jquery.nicefileinput.min.js';
?>

c. Add a Load CSS action to the form On Load event and add ths CSS to it:

.gcore-display-table {
  width: 100% !important;
}
.nice {
  border: solid #549384 1px;
  background: #fff;
  font-size: 14px;
  display: block;
  width: 100%;
  max-width: 360px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 0 0 2px #fff;
}
.nice:hover {
  border: solid #069 1px;
}
.nice .NFI-button {
  height: 40px;
  line-height: 40px;
  background: #549384;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  color: #fff;
  width: 30%;
  font-weight: 700;
}
.nice .NFI-button:hover {
  background: #069;
}
.nice .NFI-filename {
  width: 70%;
  height: 40px;
  margin: 0;
  padding: 0;
  display: block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}
.gbs3 .NFI-wrapper {
  // needed to over-write the ChronoForms padding settings
  padding: 0px; !important
}

Note: This CSS is taken from an example on Jorge's site - you can edit it to suit your needs. 

d. Save and test the form.