← Snippets - Styles

Styled File Input Fields

The normal file input fields are super boring. So instead, the designers like to style them! It’s not exactly easy to style the file input fields, but the good news is that Tympanus has done all the work for us. Here are instructions on how to install the input fields.

To see basic instructions on how to set up a form with a file input field, see this page.

How To

  1. Download the source for the Tympanus demo. (Here’s a direct link to the zip.)

  2. Choose from their list of demo examples the one that’s closest to your design. For this example, I’ll be using option #1.

  3. In the index.html file included in the source file zip, find the base classes and the class for the option you want, and copy all that into your site. You’ll need to clean it up and do some less/sass conversion to match our standards. This could include, but is not limited to:

  • Changing the name of the input to match the SCALA for your form
  • Removing the SVG they placed to add your own iconfont span
  • Ensuring it has an ADA compliant, unique label that matches the ID of the form
  • Change the “box” class around the input field to be a form-group instead

  1. From the component.scss file they provide, you’ll notice they provide some .js and .no-js classes at the start–take the .js classes and apply them to your .inputfile class. For the rest, find the style for your particular button and put it into the styles. Below, I have included the styles set up and nested correctly for style 1, and may add in more as I come across them.

  2. In the JS folder they provide, you will find several .js files. Copy the jquery.custom-file-input.js file and paste it into the src > scripts > plugins folder for your site. Here’s a copy of that file, current as of 01/25/2021, but if you’d rather, here is a direct link. {% raw %}

/*
	By Osvaldas Valutis, www.osvaldas.info
	Available for use under the MIT License
*/

'use strict';

;( function( $, window, document, undefined )
{
	$( '.inputfile' ).each( function()
	{
		var $input	 = $( this ),
			$label	 = $input.next( 'label' ),
			labelVal = $label.html();

		$input.on( 'change', function( e )
		{
			var fileName = '';

			if( this.files && this.files.length > 1 )
				fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
			else if( e.target.value )
				fileName = e.target.value.split( '\\' ).pop();

			if( fileName )
				$label.find( 'span' ).html( fileName );
			else
				$label.html( labelVal );
		});

		// Firefox bug fix
		$input
		.on( 'focus', function(){ $input.addClass( 'has-focus' ); })
		.on( 'blur', function(){ $input.removeClass( 'has-focus' ); });
	});
})( jQuery, window, document );

{% endraw %} 6. Make sure to include the new plugin inside your scripts.mustache file–not strictly required if you are already up to UAT, but strongly suggested anyway.

HTML

{% raw %}

{{! Input Style 1 }}
<fieldset>
  <legend class="h3 d-block">File Upload</legend>
  <div class="form-group">
    <input type="file" name="fileUpload" id="fileUpload" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple />
    <label for="fileUpload" class="w-100"><span>Choose a file&hellip;</span></label>
  </div>
</fieldset>

{{! Input Style 2 }}
<fieldset>
  <legend class="form-label d-block">Description Document</legend>
  <div class="form-group">
    <input type="file" name="fileUpload" id="fileUpload" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple />
    <label for="fileUpload" class="w-100"><span></span> <strong>Choose a file&hellip;</strong></label>
  </div>
</fieldset>

{% endraw %}

Styles

.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
  // Input Style 1
    + label {
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      display: inline-block;
      overflow: hidden;
      @extend .btn;
      @extend .btn-primary;
      * {
        /* pointer-events: none; */
        /* in case of FastClick lib use */
      }
      span {
        color: $white;
      }
    }
    @include hover-focus {
      + label span {
        color: $primary;
      }
      &.has-focus + label span {
        color: $primary;
      }
    }
    &.has-focus + label span {
      color: $white;
    }
  // End Input Style 1
  
  // Input Style 2
    + label {
      padding: 0;
      span {
      }
      span {
        width: 146px;
        min-height: 2em;
        display: inline-block;
        vertical-align: middle;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 16px;
        line-height: 16px + 5px;
        font-weight: $font-weight-normal;
        cursor: pointer;
        padding: 10px 25px;
        color: $gray-800;
      }
      strong {
        @extend .btn;
        @extend .btn-default;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }
  // End Input Style 2
}

Tags: form, scss, js, javascript, script, sass, styles, html, mustache