¿Cómo cambiar el tamaño del botón del archivo de entrada?

Estoy trabajando con el archivo de entrada de estilo con el método de opacidad - el botón del archivo de entrada real tiene opacidad 0 y frente a él, usando z-index es otra entrada (con opacidad: 1). Desafortunadamente, quiero que mi botón visible sea una imagen cuadrada (ancho: alto: 1: 1) - y el archivo de entrada invisible siempre es rectangular (cuadro de entrada y cuadro de selección con una relación de aspecto de aproximadamente 1:10). La pregunta es: cómo cambiar el tamaño del botón del archivo de entrada para que se cuadre (o cualquier tamaño) para que se pueda hacer clic en el área del botón visible completo (porque solo hacer clic en el botón invisible provoca la apertura de la ventana del navegador). Ahora solo se puede hacer "clic" en una parte del botón visible.¿Cómo cambiar el tamaño del botón del archivo de entrada?

CSS:

<style type="text/css"> 
    .upload { 
     position:relative; 
    width:100px; 
    } 

    .realupload { 
    position:absolute; 
    top:0; 
    right:0; 
    opacity:0.5; 
    -moz-opacity:0.5; 
    filter:alpha(opacity:0.5); 
    z-index:2; 
    width:100px; 
    } 

    form .fakeupload { 
    background: url(images/bglines.png); 
    } 

    form .fakeupload input { 
    width:0px; 
    } 

    </style>

y HTML:

<form> 
    <li class="upload"> 
    <div class="fakeupload"> 
     <input type="text" name="fakeupload" style="opacity: 0;"/> 
    </div> 
    <input type="file" name="upload" id="realupload" class="realupload" onchange="this.form.fakeupload.value = this.value;" style="font-size: 5px;" /> 
    </li> 
    </form>

Fuente

2012-02-05 Kalreg

¿Por qué está colocando un campo de entrada de texto en ¿Cuál es el problema? – Scott

Cambiar el lugar de entrada no hace diferencia :( – Kalreg

-1

tratar de usar la "imagen" tipo de entrada?

De lo contrario, deberá asegurarse de configurar la pantalla: parámetro de bloqueo en el botón de entrada.

Fuente

2012-02-05 21:51:02

Estoy haciendo que los archivos de carga funcionen con "archivo de entrada", así que supongo que "la imagen de entrada" no puede ayudarme. no funciona para mí, aunque podría estar haciendo algo mal. Si tiene alguna idea de solución con pantalla: bloque, agradecería algún código fuente de ejemplo. – Kalreg

"Imagen" es una forma de reemplazar el botón de enviar, no el archivo entrada – Rafael

Es posible que el problema sea el HTML mal formado. - No puede tener etiquetas de formulario fuera de las etiquetas li.

Esto parece funcionar bien para mí ..... Demo here

Fuente

2012-02-05 22:26:22 Scott

Sí, funciona, pero no resuelve el problema. Mira esto: [enlace ] (http://jsfiddle.net/a4Jtz/4/): quiero que el área roja completa cause efecto de clic y empiece a explorar archivos.Especialmente parte izquierda del botón 'archivo de entrada' (entrada de ruta). La mejor idea que tengo ahora es hacer no una entrada de archivo, pero por ejemplo 3 entradas de archivo una debajo de la otra para hacer que el área cuadrada pueda hacer clic .. – Kalreg

Lo siento, no veo su problema aquí en absoluto. Toda el área lee el clic. – Scott

Extraño: para mí, solo el área del "archivo de entrada" provoca un efecto de exploración (con transparencia). El área roja sin archivo de entrada transparente mientras hace clic no hace nada. Uso Firefox 10.0. ¿Tal vez ese es el problema de que tenemos diferentes navegadores? – Kalreg

Tuvimos un caso similar.

no es super elegante, pero en lugar de poner el archivo de entrada múltiple se puede tratar de la siguiente manera:

aumentó el tamaño de fuente de la entrada depara aumentar la anchura del botón

establecer la matriz elemento relativo overflow: hidden

(opcional) Ajuste el altura a 100%

Como en el demo here (basado en demostración de Scott)

sólo funciona en Firefox

Fuente

2012-02-20 11:35:10

¡El CSS también funciona para IE8! Gran sugerencia – kernel

Para acortar el botón archivo de tipo de entrada de área seleccionable se puede tratar de usar esto:

form .fakeupload input { 
    width:20px; 
    transform: scale(0.23,1); 
}

Este estrechará el área clicable del archivo de tipo de entrada. (Puede usar transform: scale (x, y) - con x e y es el número que se ajusta a sus necesidades. Recuerde agregar un estilo adecuado para dispositivos móviles o navegadores diferentes

Fuente

2017-03-30 14:04:47 born2fr4g

¿Cómo cambiar el tamaño del botón del archivo de entrada?

Respuesta

Cuestiones relacionadas