How to customize input file?

Question

I need to customize a file type input, but all the examples I found seem funny and does not work with Multiple, rs You need to look like that:

There is a way to do only with CSS?

Answer 1

Hello only with CSS you will not get. I’ve put together a simple way to do what you want with jQuery and CSS https://jsfiddle.net/4oz8znv9/2/

$(function(){
    $('#upload').on('change',function(){
        var numArquivos = $(this).get(0).files.length;
        if ( numArquivos > 1 ) {
	        $('#texto').val( numArquivos+' arquivos selecionados' );
        } else {
	        $('#texto').val( $(this).val() );
        }
    });
});

#teste { position:relative; }
#upload { position:absolute; top:0;left:0; border:1px solid #ff0000; opacity:0.01; z-index:1; }
#texto { border:0px; background:#dedede; border-radius:4px; padding:5px; }
#botao { border:1px solid #dedede; background:#989898; color:#ffffff; border-radius:4px; padding:5px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="teste">
    <input type="file" multiple="multiple" id="upload" />
    <input type="text" id="texto" />
    <input type="button" id="botao" value="Enviar" />
</div>

Att.

Answer 2

I suggest you do so:

CSS

@import url('http://fonts.googleapis.com/css?family=Open+Sans');
#multiple_upload {
      position:relative;
}
#uploadChange {
      position:absolute;
      top:2px;
      left:0;
      opacity:0.01;
      border:none;
      width:355px;
      padding:10px;
      z-index:1;
      cursor:pointer
}
#message {
      border:2px solid #ccc;
      background:#fff;
      padding:10px;
      font-family:'Open Sans';
      width:250px;
      float:left;
      margin:4px;
      overflow:hidden;
      color: #333
}
#botao {
      border:1px solid #ff7b00;
      background:#ff7b00;
      color:#ffffff;
      font-family:'Open Sans';
      font-size:15px;
      font-weight:bold;
      padding:12px 28px;
      margin:4px 8px;
}
#multiple_upload:hover > #botao {
      background:#662f00;
      border-color:#662f00;
} 
#lista ul {
      margin-left: -16px; 
}
#lista ul li {
     border-bottom:1px solid #eee;
     padding:10px;
}

HTML

<div id="multiple_upload">
    <input type="file" multiple="multiple" id="uploadChange" />
    <div id="message"><span>Selecionar fotos</span></div>
    <input type="button" id="botao" value="Upload" />
   <div id="lista">
   </div>
</div>

Javascript jQuery

$(function(){
    $('#uploadChange').on('change',function(){
        var totalFiles = $(this).get(0).files.length;
        if(totalFiles == 0) {
          $('#message').text('Selecionar fotos' );
        }
        if ( totalFiles > 1) {
            $('#message').text( totalFiles+' arquivos selecionados' );
        } else {
            $('#message').text( totalFiles+' arquivo selecionado' );
        }
        var htm='<ul>';
         for (var i=0; i < totalFiles; i++) {
             htm += '<li>'+$(this).get(0).files[i].name+'</li>'+"\n";
         }
        htm += '</ul>';

           $('#lista').html(htm);

    });
});

The example can be found here

Obs: If you want there is also a Drag and Drop option (drag and drop).
Click here to download the example.
And if you’re wearing bootstrap, this one Upload Plugin is also very good.

Answer 3

Buddy, you can do with css yes.

Here’s an example I made for you, see if it fits.

I did the following, created a div with input file and a common button inside. You don’t need to create a button of your own.

#div-input-file{
    height:28px;
    width:385px;
    margin:0px;
}
#div-input-file #file-original{
    opacity: 0.0;
    -moz-opacity: 0.0;
    filter: alpha(opacity=00);
    font-size:18px;
}
#div-input-falso{
    margin-top:-28px;
    display:inline;
}
#triggerFile{
    display:inline;
    min-height:28px;
    background-color:#F58220;
    border:0px;
    margin:0px;
    font-weight:normal;
    color:#fff;
}
#div-input-falso #file-falso{
    width:265px;
    height:22px;
    font-size:18px;
    font-family: Verdana;
}

<div id="div-input-file">
            
    <input name="file-original" type="file" size="30" id="file-original" onchange="document.getElementById('file-falso').value = this.value;"/>
    <div id="div-input-falso">
        <input name="file-falso" type="text" id="file-falso" /></div>
        <input type="button" id="triggerFile" value="UPLOAD"/>
    </div>

</div>

It’s just a quick fix, see if it fits.

Hugs