3

Me gustaría que un input (<input type='file' >). Tenga la apariencia de un div con una class la cual le da foma de circulo.

circle {
  border-radius: 50%;
  width: 80%;
  height: 0;
  padding-bottom: 80%;
  border-style: solid;
  border-color: #f0f2f7;
}
<div class="circle">
</div>

3 respuestas 3

2

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.

2

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>

1
  • La idea en las respuestas es explicar la solución, no solo poner "espero que te sirva".
    – Shaz
    Commented el 23 mar. 2018 a las 17:55
0

quizá esta forma te sirva. Colocas un seudoelemento after o before y colocas al input posición relativa y al seudoelemento posición absoluta y lo tapas. De igual forma cuando presiones el seudoelemento, se te abrirá el buscador de archivos.

input[type="file"]{
    position: relative;}

input[type="file"]::after{
    position: absolute;
    content: "Seleccionar archivo";
    padding: .8rem 1rem;
    border-radius: 1rem;
    background-color: $gris;
    top:.5rem;
    left: .7rem;
    cursor: pointer;}


<label for="imagen">Imagen:</label>
<input type="file" id="imagen" >
1
  • Hola Facu, bienvenido, mira como responder para evitar votos negativos y/o que tu repuesta sea eliminada, y de paso, aprovecha y haz el recorrido de Bienvenida para entender mejor cómo funcionamos y de paso obtener tu primer medalla! Commented el 10 feb. 2023 a las 9:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.