Come posso personalizzare il pulsante Sfoglia?

Question

Voglio personalizzare (voglio cambiare sfondo e colore ecc.) Il pulsante Sfoglia nel campo del file di caricamento.

<input type="file" tabindex="6" class="medium" size="20" value="" id="input_5_13" name="input_13"> 

Answer 1

Non è possibile. Devi creare il tuo pulsante e attivare l'input effettivo.

Qui è possibile utilizzare jQuery. Vedere working example.

HTML:

<input type="file" class="hidden" id="uploadFile"/> 
<div class="button" id="uploadTrigger">Upload File</div> 

jQuery:

$("#uploadTrigger").click(function(){ 
    $("#uploadFile").click(); 
}); 

CSS:

.hidden { 
    display:none; 
} 
.button { 
    border: 1px solid #333; 
    padding: 10px; 
    margin: 5px; 
    background: #777; 
    color: #fff; 
    width:75px; 
} 

.button:hover { 
    background: #333; 
    cursor: pointer; 
} 

Answer 2

non è possibile personalizzare direttamente il pulsante Sfoglia. il tuo CSS non funzionerà su di esso.

Quello che puoi fare è, puoi creare un tuo pulsante con una casella di testo alla sua sinistra. personalizzalo e, al clic, attiva il caricamento del file originale.

vedono questo link e this

Answer 3

Verificare quanto segue per i cambiamenti nella pulsante Sfoglia:

1. Browse button css
2. Browse button design

auguriamo che questi link vi aiuterà.

Answer 4

La premessa di base dietro pulsanti di input file di stile è quello di sovrapporre i controlli posizionati in modo assoluto sul file caricare. L'opacità del caricamento del file è impostata su 0, causando la mancata visualizzazione. L'indice z è impostato sopra i controlli sovrapposti, mentre l'indice z dei controlli è impostato su un valore inferiore rispetto al caricamento del file. Così, quando l'utente pensa che sono cliccando i controlli sovrapposti che sono in realtà clic sul file caricare con opacità impostata a 0.

Ecco un esempio davvero grezzi:

HTML

<div id="file-upload-cont"> 
    <input id="original" type="file"/> 
    <div id="my-button">Find</div> 
    <input id="overlay"/> 
</div> 

CSS

#my-button{ 
    position: absolute; 
    border: 1px solid black; 
    background: green; 
    padding 3px; 
    width: 50px; 
    height: 25px; 
    text-align: center; 
    left: 148px; /* Positioning over file-upload */ 
    top: 0px; 
    z-index: 1; /* Lower z-index causes controls to sit under file upload */ 
} 

#overlay{ 
position: absolute; 
z-index: 1; /* Lower z-index causes controls to sit under file upload */ 
left: 0; /* Positioning over file-upload */ 
} 

#original{ 
    opacity: 0; /* Opacity makes it invisible*/ 
    position: relative; 
    z-index: 100; /* z-index causes original file upload to sit above other controls*/ 
} 

#file-upload-cont{ 
    position: relative; 
} 

Esempio di lavorohttp://jsfiddle.net/tP8KY/1/