Jak vytvořit vlastní vzhled file inputu.

Stylování formulářových prvků je většinou problematické, což platí i o "file inputu". Ten se mění napříč prohlížeči mnohdy je těžké vědět i jeho šířku/výšku natož mu měnt vzhled. Tento článek poradí jak takový file input vytvořit.

//HTML cast


  
  Zvolte soubor…


//CSS cast

.js .inputfile { /*trida "js" je ze skriptu modernizer a urcuje zda prohlizec ma aktivovany javascript*/
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.inputfile + label {
  max-width: 96%;
  font-size: 18px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  padding: 5px 2% 5px 2%;
  vertical-align: middle;
}
.no-js .inputfile + label { /*trida "no-js" je ze skriptu modernizer a urcuje zda prohlizec ma deaktivovany javascript*/
  display: none;
}
.inputfile:focus + label,
.inputfile.has-focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
  /* pointer-events: none; */
  /* in case of FastClick lib use */
}
.inputfile + label .file_input_ikona{
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 5px;
  vertical-align: middle;
  
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url("../../img/file_input_ico.png");
}
.inputfile + label {
  color: #f1e5e6;
  background-color: #d3394c;
}
.inputfile:focus + label,
.inputfile.has-focus + label,
.inputfile + label:hover {
  background-color: #722040;
}

//jQuery cast

  $( '.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( '.file_input_popis' ).html( fileName );
          else
              $label.html( labelVal );
      });

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

<< zpět