Aplicar CSS a botão para carregamento de ficheiros

index.html
<!DOCTYPE html>
<html>
  <head>
 <link rel="stylesheet" type="text/css" href="http://geniuscarrier.com/assets/css/bootstrap.css?v=dac2c3f9e0" />
    <style>
 .file-upload {
position: relative;  
overflow: hidden;  
margin: 10px;  
}
.file-upload input.upload {
position: absolute;  
top: 0;  
right: 0;  
margin: 0;  
padding: 0;  
font-size: 20px;  
cursor: pointer;  
opacity: 0;  
filter: alpha(opacity=0);  
}
    </style>
  </head>
<body>
<br/>
<div style="display:inline; line-height: 0.7;">
<input id="uploadFile" type="text" disabled="disabled" placeholder="Seleccionar ficheiro" style="width: 250px" />
<div class="file-upload btn btn-warning" style="line-height: 0.68;">
<span>Carregar</span>
<input class="upload" id="uploadBtn" type="file" />
</div>
</div>  

<script type="text/javascript">  
document.getElementById("uploadBtn").onchange = function () {  
    document.getElementById("uploadFile").value = this.value;
};
</script>  
  </body>
</html>



O estilo aplicado ao botão é Bootstrap para simplificação conforme disponibilizado por Yang Zhao no artigo original.

O segredo está na CSS Cascading Style Sheets aplicada em conjunto com o JavaScript.




vide HMTL5, AJAX e ASP.NET e o carregamento de ficheiros





fonte: How to Style a HTML file upload button in Pure CSS
Licença CC BY-SA 4.0 Silvia Pinhão Lopes, 15.5.16
Print Friendly and PDF

Sem comentários:

Com tecnologia do Blogger.