Podrías realizarlo ocultando el input type="file"
y estilizando una label
conectada a el mediante el atributo for
.
De esta manera, cuando des click sobre la label
(la cual podrás estilizar), se lanzará el evento del input type="file"
que se encuentra oculto y te permitirá elegir un archivo.
#fichero{
display: none;
}
.circle{
display: inline-block;
border-radius: 50%;
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
}
<input id="fichero" type="file">
<label for="fichero" class="circle"></label>
NOTA: Ten en cuenta que el ID del input
tiene que ser el mismo que el valor del atributo for
de la label
.