Aplicar CSS a botão para carregamento de ficheiros
index.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
<!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
Sem comentários: