[CSS] cambiare style input file

[sevenjeak]

Salve utenti di AV,

Ho cercato questo sul forum ma non ho trovato niente, cmq io ho un form cosi impostato:

<form action="send.php" enctype="multipart/form-data" method="post">
   <label>Tuo Nome: </label> <input type="text" name="name" />
   <label>File: </label> <input type="file" name="fl" />
   <input type="submit" value="Invia modulo" />
</form>

Sui tag <input> ho applicato uno style, che pero non viene applicato all'input di tipo file, vorrei sapere se è possibile applicarlo anche a l'input di tipo file o non è possibile?

Ovviamente non viene applicato, puoi applcicare lunghezza e altezza. i tag input radio, checkbox e file non possono essere formattati se non con Javascript

[sevenjeak]

Come potrei formattarli con javascript?

Basterebbe aggiungere class="nomeclasse" all'input di tipo file! XD

.nomeclasse { background-color: #ddd; color: #000; border: 1px solid #555; }

Sinceramente non lo so perchè non ho studiato Javascript, ma nel caro e vecchio tema AcidTiger di Vjacheslav Trushkin gli input dei checkbox erano formattati con delle immagini in Javascript, quindi cosa vieterebbe di farlo anche agli altri?

Come potrei formattarli con javascript?

Se ti può essere utile, ho trovato questo tutorial in inglese, che però non ho provato.

[sevenjeak]

ok, grazie

[Xsescott]

Questo dovrebbe essere la parte interessata del link che ha postato musicanapoli:

var W3CDOM = (document.createElement && document.getElementsByTagName);

function initFileUploads() {
if (!W3CDOM) return;
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
fakeFileUpload.appendChild(document.createElement( 'input'));
var image = document.createElement('img');
image.src='pix/button_select.gif';
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
}

[sevenjeak]

Si, ma io, visto che javascript me lo dovrei ristudiare, perche non è che capisco molto ho notato che in fondo alla pagina, se nn sbaglio, c'è un css che fa quasi la stessa cosa di quello script

Guarda qui LINK lui modifica un form per la ricerca ma credo si la stessa cosa...