6

Preciso customizar um input do tipo file, mas todos os exemplos que encontrei parecem gambiarras e não funciona com multiple, rs Precisa ficar com essa aparência:

inserir a descrição da imagem aqui

Tem jeito de fazer só com CSS?

1
  • 2
    Poste as formas que você já tentou e "não funciona".
    – Randrade
    Commented 9/11/2015 às 17:06

3 Respostas 3

5

Olá só com CSS você não irá conseguir. Eu montei uma forma simples de fazer o que você quer com jQuery e 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.

0
2

Eu sugiro fazer assim:

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);

    });
});

O exemplo pode ser conferido aqui

Obs: Se quiser há também uma opção de Drag and Drop (arrastar e soltar).
Clique aqui para baixar o exemplo.
E se tiver usando bootstrap, esse Plugin de Upload também é muito bom.

-1

Amigão, tem como fazer com css sim.

Veja aqui um exemplo que fiz para você, veja se atende.

Fiz o seguinte, criei uma div com input file e um botão comum dentro. Você não precisa criar um botão proprio.

#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>

É apenas uma solução rapida, veja se atende.

Abraços

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .