Estoy usando <input type="file" /> en mi página web. Tengo diferentes clases de CSS para el botón y otros controles. Pero no puedo agregar ninguna clase, estilo al botón de exploración que aparece debido a la etiqueta anterior.Cómo aplicar CSS para examinar el botón
¿Hay alguna manera de cambiar su apariencia predeterminada?
Gracias es un avance.
No puede hacer eso. Solo puede aplicar estilo a todo <input />.
Puede usar opacity: 0 hacks CSS para reemplazarlo con su imagen y imagen favorita: hover.
Tenga en cuenta que la propiedad height: no funcionará en Firefox 3.6; Puede usar font-size: para agrandar la altura en su lugar.
Tengo un ejemplo hecho: http://timc.idv.tw/html5-file-upload/; inspeccionar el CSS de la 2da demostración.
No puede aplicar estilo a la entrada del archivo directamente, pero sí puede darle un estilo falso y hacer que sea invisible, pero aún se puede hacer clic. Hay un artículo sobre cómo hacerlo al Quirksmode.
También hay some nice libraries para diseñar elementos de formas difíciles de pelar. Uniform es bueno para seleccionar y cargar campos.
No se puede aplicar estilo a un botón de entrada de archivo con CSS. Este no es el único elemento que no puedes diseñar. Algunas otras entradas no aceptan estilos. Mira esto fiddle para ver muchos tipos de entradas. Según su navegador, algunas entradas se muestran de manera diferente. Las entradas como la entrada de rango o las entradas de fecha usan una interfaz de usuario de nivel de sistema operativo que no es editable por CSS.
Lo que puede hacer es ocultar la entrada de archivo y mostrar otro elemento como un div u otra entrada que acepte estilo como entrada de tipo de botón como su entrada de archivo y desencadenar desencadenar clic y enviar eventos (hit enter) en su hided real entrada de archivo.
Código ejemplo:
HTML
<input type="file" />
<label>Select file to upload: <input type="button" /></label>
CSS
input[type="file"]{visibility:hidden; width:0;}
JavaScript:
var fileInput = document.querySelectorAll('input[type="file"]')[0],
fakeFileInput = document.querySelectorAll('label')[0],
clickEvent = document.createEvent('MouseEvent');
clickEvent.initMouseEvent('click',true,true,document.defaultView,1,0,0,0,0,false,false,false,false,0,null);
fakeFileInput.addEventListener('click', function(event){
fileInput.dispatchEvent(clickEvent);
}, false);
Mira fiddle in action
Así que la respuesta a su pregunta es: No, desafortunadamente no se puede estilo de entrada de archivos BOTÓN!
El navegador no se abre en Firefox y funciona solo por primera vez en Chrome. – vusan
¿No funciona una clase de CSS para ese botón? –
¿Cómo agregarle clase a ese botón? En realidad, ese botón se genera dinámicamente en el navegador. –