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:
Tem jeito de fazer só com CSS?
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:
Tem jeito de fazer só com CSS?
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.
Eu sugiro fazer assim:
@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;
}
<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>
$(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.
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