Skip to main content
Explicacion
Origen Enlace

Espero te sirva En este caso pues aplique ciertos estilos a los divs, para que de esta forma no apareciera el input file si no el circulo que tu deseas

.fileContainer {
    overflow: hidden;
    position: relative;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 50%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}

.fileContainer {
    border-radius: 50%;
  width: 80%;
  height:0;
  padding-bottom: 80%;
  border-style: solid;
  border-color: #f0f2f7;
  background:gray;
}

.fileContainer [type=file] {
    cursor: pointer;
}
<div class="fileContainer">
    <input type="file"/>
</div>

Espero te sirva

.fileContainer {
    overflow: hidden;
    position: relative;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 50%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}

.fileContainer {
    border-radius: 50%;
  width: 80%;
  height:0;
  padding-bottom: 80%;
  border-style: solid;
  border-color: #f0f2f7;
  background:gray;
}

.fileContainer [type=file] {
    cursor: pointer;
}
<div class="fileContainer">
    <input type="file"/>
</div>

En este caso pues aplique ciertos estilos a los divs, para que de esta forma no apareciera el input file si no el circulo que tu deseas

.fileContainer {
    overflow: hidden;
    position: relative;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 50%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}

.fileContainer {
    border-radius: 50%;
  width: 80%;
  height:0;
  padding-bottom: 80%;
  border-style: solid;
  border-color: #f0f2f7;
  background:gray;
}

.fileContainer [type=file] {
    cursor: pointer;
}
<div class="fileContainer">
    <input type="file"/>
</div>

Origen Enlace

Espero te sirva

.fileContainer {
    overflow: hidden;
    position: relative;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 50%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}

.fileContainer {
    border-radius: 50%;
  width: 80%;
  height:0;
  padding-bottom: 80%;
  border-style: solid;
  border-color: #f0f2f7;
  background:gray;
}

.fileContainer [type=file] {
    cursor: pointer;
}
<div class="fileContainer">
    <input type="file"/>
</div>