3

Tengo un botón en el formulario que se usa para subir una imagen. Pero aplicando el código típico no queda bien...

          <div class="ui segment">
        <div class="field">
          <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
          <label for="#elegir">Elige el archivo a subir: </label>
          <input id="elegir" name="uploadedfile" type="file" /><br />
          <input type="submit" class="ui blue inline button" value="Subir archivo" />
        </div>
      </div>

Asi me carga en el formulario

Busqué en la documentación de semantic-ui pero no encontré una implementación de este item...

1 respuesta 1

1

Jugar con los estilos del input para subir archivos no es fácil, pues la mayoría de los navegadores no permiten darle estilo directamente, ni con JavaScript ni con CSS. Semantic UI, al igual que la mayoría de frameworks CSS no ofrece un estilo específico para dicho elemento.

Hay muchas soluciones provisionales, las cuales yo consideraría más como "trucos" de CSS y/o JavaScript para lograr dicho efecto.

Te dejo uno de tantos ejemplos que puedes encontrar en internet:

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Subir archivo
</label>
<input id="file-upload" type="file"/>

Otro ejemplo, un poco más "Bootstrap":

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">
    Subir archivo <input type="file">
</span>

Hay una opción que puede ser muy interesante con Materialize CSS, pero tal vez se sale un poco del alcance de la pregunta, al igual que el anterior de Bootstrap:

http://materializecss.com/forms.html#file

1
  • si estaba viendo que es todo un tema !!!... igual me sirve... muchas gracias !!!... (después cuando la página esté lista, te voy a pasar el link para que veas que todo esto valió la pena jajajaja)
    – MNibor
    Commented el 4 jul. 2017 a las 17:45

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.