1 - Vamos criar uma classe para nossa div:
.divExemplo{
cursor:pointer;
background-color:rgb(155,155,155);
width:100px;
height:100px;
}
Basicamente estamos dizendo que nossa div renderizará o cursor como um pointer (a mãozinha que aparece quando colocamos o ponteiro do mouse em cima de um link, por exemplo) em toda a sua área, que é de 100px de largura e altura com um background cinza.2 - Agora vamos para o nosso HTML:
Agora nós envolvemos nossa div com um label, e dentro da nossa div terá nosso input do tipo file com um "display:none", pois não queremos que ela apareça para o usuário. Em qualquer área da div que você clicar, a ação do input file será disparada.
O Código final fica da seguinte maneira(adicionei também um texto para nossa div):
<html>
<head>
<title>Estilizando input file</title>
<style>
.divExemplo{
cursor:pointer;
background-color:rgb(155,155,155);
width:100px;
height:100px;
}
p.alignText{
text-align:center;
}
</style>
</head>
<body>
</body>
</html>
Veja em ação abaixo:
UPDATE
Também podemos fazer da seguinte maneira, com o mesmo efeito:
<html>
<head>
<title> Estilizando input file</title>
<style>
p.style{
text-align:center;
cursor:pointer;
background-color:rgb(155,155,155);
width:100px;
height:100px;
}
</style>
</head>
<body>
</body>
</html>
so vale lembrar que se for usar um plugin tipo o jquery validade, tem que fazer uma alteracao, pq ele nao valida campos :hidden.
ResponderExcluirótima dica Vinicius
Uma boa solução! Mas você não pode usar uma div dentro de um label xD
ResponderExcluirUse span no lugar da div :)
Fernando, infelizmente não consegui o mesmo efeito com span =/
ResponderExcluirPostei um update com uma versão simplificada, espero que goste!
Consegui sucesso utilizando o update :D Vlw Brother
ResponderExcluir