Cambiar el tamaño del tipo de entrada = botón de búsqueda "archivo" en firefox?

Question

¿Hay alguna forma de usar CSS o JS que le permita cambiar el tamaño del tipo de entrada = "archivo" del botón de búsqueda en Firefox?

Sé que no puede cambiar el texto del botón, pero todo lo que tengo que hacer es ampliar este botón para Firefox. Entonces, usar una regla de -moz css sería perfecto.

Answer 1

El estilo de los botones de entrada de archivos es muy limitado por razones de seguridad. Hay algunas soluciones, pero ninguna es perfecta. Echa un vistazo a este post en quirksmode:

http://www.quirksmode.org/dom/inputfile.html

Answer 2

Editar: Como otros han señalado Firefox no suuport el método siguiente me remito al siguiente enlace http://www.quirksmode.org/dom/inputfile.html

La siguiente es una solución bastante simple . Sin embargo, le aconsejo que agregue una clase a la etiqueta. Básicamente que el estilo de la etiqueta en lugar de la entrada para evitar problemas con el navegador cruz y anchura y altura errores:

<label> 
    <input type=file> 
</label> 

CSS

label input{-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;} 
label {background:green;width:200px;height:100px;display:block; /* more styles here */} 

http://jsfiddle.net/DVLxp/

Answer 3

Qué sitios web a menudo lo hacen cuando necesitan un "a medida" widget de carga de archivos: tiene oculto el campo "real" de carga de archivos. Agregue un campo de texto que mostrará el valor actual del campo de carga de archivos y un botón que activará la selección de archivos en el campo de carga de archivos. Aquí un ejemplo:

<input id="file" type="file" style="display: none;" 
     onchange="document.getElementById('text').value = this.value;"> 

<input id="text" type="text" readonly><input type="button" 
     onclick="document.getElementById('file').click();" value="Choose file"> 

Answer 4

aquí es la idea principal: http://www.quirksmode.org/dom/inputfile.html

Y esto podría ser atento para cambiar el tamaño área de entrada

input{font-size: 100px;} 

funciona bien para mí.

Answer 5

En cuanto a mí, Zhenya Shevchenko brindó una de las mejores soluciones de trabajo. Usando su método, podemos crear botón de entrada de archivos entre navegadores: http://jsfiddle.net/JHcFR/

<div class="fileInput"> 
    <input type="file" /> 
</div> 

.fileInput { 
    overflow: hidden; width: 500px; height: 200px; background: red; 
} 
.fileInput input { 
    font-size: 200px; opacity: 0; 
    float: right; filter: alpha(opacity=0); /*IE*/ 
} 

Answer 6

prueba este: http://jsfiddle.net/CnHj5/ funciona en Firefox y un bonito cursor del puntero está disponible.

HTML:

<div class="upload"> 
    <input class="upload" type="file" /> 
</div> 

CSS:

input.upload { 
    -moz-opacity:0; 
    filter:alpha(opacity: 0); 
    opacity: 0; 
    position: absolute; 
    right:0; 
    font-size: 200px; 
    cursor: pointer; 
} 
div.upload { 
    background-color:green; 
    width:200px; 
    height:100px; 
    position: relative; 
    display:block; 
    overflow:hidden;}