Aplicar estilo a un botón input type=”file”

Recuerda que en las ciencias informáticas un error casi siempere puede tener varias soluciones, pero nosotros enseñamos lo mejor y más óptimo.

Solución:

¡No necesitas JavaScript para esto! Aquí hay una solución de navegador cruzado:

¡Mira este ejemplo! – Funciona en Chrome/FF/IE – (IE10/9/8/7)

El mejor enfoque sería tener un elemento de etiqueta personalizado con un for attribute unido a un oculto elemento de entrada de archivo. (Las etiquetas for attribute debe coincidir con el elemento del archivo id para que esto funcione).

    Custom Upload

Como alternativa, también podría simplemente envolver el elemento de entrada del archivo con una etiqueta directamente: (ejemplo)

    
    Custom Upload

En términos de estilo, solo esconde¹ el elemento de entrada usando el attribute selector.

input[type="file"] 
    display: none;

Entonces todo lo que necesita hacer es diseñar la costumbre label elemento. (ejemplo).

.custom-file-upload 
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;

---

¹ – Vale la pena señalar que si oculta el elemento usando display: none, no funcionará en IE8 y versiones anteriores. También tenga en cuenta el hecho de que la validación de jQuery no valida los campos ocultos de forma predeterminada. Si alguna de esas cosas es un problema para usted, aquí hay dos métodos diferentes para ocultar la entrada (1, 2) que funcionan en estas circunstancias.

Las entradas de archivos de estilo son notoriamente difíciles, ya que la mayoría de los navegadores no cambiarán la apariencia de CSS o JavaScript.

Incluso el tamaño de la entrada no responderá a los gustos de:

En su lugar, deberá utilizar el tamaño attribute:

Para cualquier estilo más sofisticado que ese (p. ej., cambiar el aspecto del botón de exploración), deberá observar el complicado enfoque de superponer un botón con estilo y un cuadro de entrada encima de la entrada del archivo nativo. El artículo ya mencionado por rm en www.quirksmode.org/dom/inputfile.html es el mejor que he visto.

ACTUALIZAR

Aunque es difícil diseñar un etiquetar directamente, esto es fácilmente posible con la ayuda de un etiqueta. Vea la respuesta a continuación de @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

siga estos pasos y podrá crear estilos personalizados para su formulario de carga de archivos:

1. este es el formulario HTML simple (lea los comentarios HTML que he escrito aquí abajo)

   
     
   Click to upload!
     
     
   
     
     
   
   

2. luego use este script simple para pasar el evento de clic a la etiqueta de entrada del archivo.

   function getFile()
        document.getElementById("upfile").click();
   
   

   Ahora puede usar cualquier tipo de estilo sin preocuparse por cómo cambiar los estilos predeterminados.

Lo sé muy bien porque he estado tratando de cambiar los estilos predeterminados durante un mes y medio. créame, es muy difícil porque los diferentes navegadores tienen diferentes etiquetas de entrada de carga. Así que use este para crear sus formularios de carga de archivos personalizados. Aquí está el código completo de CARGA AUTOMATIZADA.

function getFile() 
  document.getElementById("upfile").click();


function sub(obj) 
  var file = obj.value;
  var fileName = file.split("\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();

#yourBtn 
  position: relative;
  top: 150px;
  font-family: calibri;
  width: 150px;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px dashed #BBB;
  text-align: center;
  background-color: #DDD;
  cursor: pointer;

  
click to upload a file
  
  
  

  
  

Comentarios y calificaciones

Si posees algún pregunta y forma de prosperar nuestro reseña te recordamos añadir una explicación y con placer lo observaremos.

---

---

Utiliza Nuestro Buscador