2009-04-06 6 views
0

können Sie mir zeigen, wie CSS-Eigenschaften auf die Schaltfläche zuzuweisen, die von type = Datei ist, sagen:Wie kann man auf die Eigenschaften einer Datei-Upload-Schaltfläche zugreifen?

<input type="file" name="coolFile"> 

Ich weiß, dass Sie in CSS benötigen, dies zu tun:

input[type=file]{ 
    background:#ccf; 
//and so on 
} 

Wie Ich weise Werte für die Schaltfläche zu?

+0

aufgehoben Sie haben grundsätzlich Ihre eigene Frage beantwortet. Genau so würden Sie CSS-Eigenschaften zuweisen. Fehle ich etwas? –

+0

Scheint so, als ob Sie bereits den CSS-Selektor kennen. Was meinst du mit den Werten für die Schaltfläche? CSS dient nur zum Stylen. Sie können den Schaltflächentext nicht mit CSS ändern. Sie brauchen JavaScript dafür. – Calvin

+0

Ah, ich verstehe. Es konnte nicht mit CSS getan werden. Ich möchte den Rahmen und den Hintergrund des Buttons ändern. – chosta

Antwort

1

Leider Mainstream-Browser erlauben keine Designer, um Dateieingabefelder direkt Stil. Sie können dies als "Sicherheitsmerkmal" betrachten, da Benutzer möglicherweise dazu verleitet werden können, Dateien hochzuladen, wenn das Dateieingabefeld auf eine trickreiche Art und Weise gestaltet ist.

Es gibt eine Lösung, die das Erstellen eines zweiten Eingabefeldes und das Verbergen der eigentlichen Dateieingabe dahinter beinhaltet. Folgendes wurde von http://www.quirksmode.org/dom/inputfile.html:

div.fileinputs { 
    position: relative; 
} 

div.fakefile { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
} 

input.file { 
    position: relative; 
    text-align: right; 
    -moz-opacity:0 ; 
    filter:alpha(opacity: 0); 
    opacity: 0; 
    z-index: 2; 
} 

<div class="fileinputs"> 
    <input type="file" class="file" /> 
    <div class="fakefile"> 
     <input /> 
     <img src="search.gif" /> 
    </div> 
</div> 
+0

Danke, ich habe diese Lösung gesehen, aber ich denke, ich werde die Knöpfe so lassen, wie sie sind. – chosta

1

Vorausgesetzt, dass Sie die Taste Text ändern möchten, hier ist eine Anleitung, wie man das tun:

http://www.quirksmode.org/dom/inputfile.html

Wenn es nur die einfachen CSS-Eigenschaften wie Farbe/Grenze/etc ist, haben Sie bereits die Antwort Du musst nur Sachen überprüfen, um herauszufinden, warum es nicht funktioniert.

0

Sie verwenden DOM/JavaScript, z:

document.getElementById("id").style.property="value"