Possiamo cambiare lo stile ?

Ho provato a cambiare il modulo HTML, inserire il tipo di file. Ecco il mio codice:

HTML, form id = form

 

.CSS

 I tried both: .upload_button{ background: url('../images/upload_btn_bg.png') no-repeat; width: 200px; height: 40px; } #form input[type=file]{ background: url('../images/upload_btn_bg.png') no-repeat; width: 200px; height: 40px; } 

Nessuno di questi due metodi funziona. Ho visto da alcuni siti web, come Facebook, YouTube, Google o Twitter, hanno uno stile diverso. Mi chiedo come lo fanno.

Non puoi fare nulla con il file di tipo input (a parte enormi hack). So che sembra orribile, ma gli standard web non hanno ancora trovato una soluzione per questo.

Quello che vorrei suggerire, però, è che hai usato qualcosa di più flessibile, come swfUpload , che ti permette di cambiare stiles, e anche di controllare la dimensione del file prima del caricamento.

Alcuni esempi accurati di esso possono essere trovati qui

Spero che questo ti aiuti

Ad esempio, prova questa variante http://www.quirksmode.org/dom/inputfile.html

Il migliore hack di sempre. File HTML di input:

  Browse File 

usando jQuery:

 $('#triggerFile').on('click', function(e){ e.preventDefault() $("#inputFile").trigger('click') }); 

Perché non metti semplicemente il css da visualizzare: none e poi attivi questo pulsante con un altro pulsante? Questo può essere fatto facilmente con javascript e quindi puoi personalizzare il pulsante te stesso completamente

Ecco un esempio di come triggersre un pulsante con un altro, ma questo è solo uno dei tanti modi: Un pulsante che fa scattare un altro clic sull’evento

Puoi cambiare il carattere-Dimensione per l’altezza o seguire questo url http://www.quirksmode.org/dom/inputfile.html (che è fondamentalmente quello che faccio nei miei progetti).

In realtà puoi!

Devi farlo con la libreria SI.Files.

Ecco un buon articolo su come è fatto nei dettagli:

In bocca al lupo!

Bhee, aggiungi le definizioni CSS al tuo tag di input html:

piace:

  

o

  

Definizioni CSS:

 border:none; background-image:url('somePathToImage'); background-repeat:no-repeat; //those things below adjust according to your background image size width:XXpx; height:XXpx; 

Così otterrai ciò che hai su Facebook o altrove;)