Come modificare la dimensione del pulsante del file di input?

Question

Sto lavorando con il file di input per lo styling con il metodo opacity - il pulsante del file di input reale ha l'opacità 0 e di fronte ad esso, l'uso di z-index è un altro input (con opacità: 1). Purtroppo desidero che il mio pulsante visibile sia un'immagine quadrata (larghezza: altezza: 1: 1) - e il file di input non visibile è sempre rettangolare (casella di input e casella di selezione con proporzioni di circa 1:10). La domanda è: come ridimensionare il pulsante di input file per essere squadrato (o qualsiasi dimensione) per rendere cliccabile l'intera area del pulsante visibile (perché solo facendo clic sul pulsante invisibile si apre la finestra del browser). Ora solo una parte del pulsante visibile è "cliccabile".

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> 

e 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> 

Answer 1

utilizzare il tipo di ingresso "immagine"?

Altrimenti dovrete essere sicuri di impostare il display: parametro di blocco sul pulsante di ingresso.

Answer 2

È possibile che l'HTML malformato sia il problema. - Non puoi avere tag modulo al di fuori dei tag li.

Questo sembra funzionare bene per me ..... Demo here

Answer 3

Abbiamo avuto un caso simile.

Non è super elegante, ma invece di mettere in ingresso di file multipli si può provare come segue:

• aumentato il font-size dell'ingresso per aumentare la larghezza del pulsante
• impostare il genitore elemento rispetto overflow: hidden
• (opzionale) Impostare l'altezza al 100%

Come nel demo here (basato sulla demo di Scott)

funziona solo su Firefox

Answer 4

Per accorciare il tipo di file di input pulsante area cliccabile si può provare a usare questo:

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

Questo restringerà l'area cliccabile del file del tipo di input. (Puoi usare transform: scale (x, y) - con xey è il numero che si adatta alle tue necessità Ricorda di aggiungere uno stile adeguato per dispositivi mobili o browser diversi