[Erledigt] Dateien durchsuchen-Button als Bild?

[marcel580]

Guten Morgen PHP.de-Forum,
ist es möglich einen Datei-Durchsuchen Button der ja durch <input type="file"> definiert ist als Bild auszugeben? Also das man auf ein Bild klicken muss um Dateien zu durchsuchen?

Vielen Dank schonmal
MatriX

[j.durini]

Verstehe ich nicht richtig. Kannst du es bitte genauer beschreiben ?

[marcel580]

Verstehe ich nicht richtig. Kannst du es bitte genauer beschreiben ?

In einem upload Formular habe ich logischerweise ein "Datei-Durchsuchen Button".
Und ich würde gerne das dieser Button ein Bild ist und kein Button

[wolf29]

Hi,

du suchst vermutlich sowas hier:

http://geniuscarrier.com/how-to-styl...n-in-pure-css/

mittels CSS kannst du den nach belieben stylen.

mfg Wolf29

[marcel580]

Hi,

du suchst vermutlich sowas hier:

http://geniuscarrier.com/how-to-styl...n-in-pure-css/

mittels CSS kannst du den nach belieben stylen.

mfg Wolf29

In der Art aber ich möchte eine Bild-Datei verwenden, habe schon probiert einfach der Button-Class in CSS das Bild als Background zu geben, funktioniert allerdings auch nicht.

[wolf29]

Zeig mal deinen Versuch.

[marcel580]

Zeig mal deinen Versuch.

HTML:

<input name="datei" type="file" class="buttondrop" /> 

CSS:

.buttondrop{
background: url(./img/upload.png);
} 

Dadurch liegt das Bild aber nur Hinter dem Button.

[wolf29]

Beispiel:

http://jsfiddle.net/tsh1yr2e/

mfg Wolf29

[marcel580]

Beispiel:

http://jsfiddle.net/tsh1yr2e/

mfg Wolf29

Vielen Dank funktioniert

[marcel580]

Hat sich erledigt. Ich habe die größe der id="filebrowse" verändert und ihn auf das Bild gesetzt.


http://jsfiddle.net/tsh1yr2e/

mfg Wolf29[/QUOTE]


Ich habe noch ein kleines Problem.
Und zwar kann ich jetzt nur auf einen kleinen Teil des Bildes am oberen Rand klicken.
Wen ich woanders hin klicke tut sich gar nichts.
[IMG][/IMG][QUOTE=wolf29;830867]Beispiel:

#file_browse_wrapper {

width: 160px;

height: 100px;

background: url(../img/upload.png) 0 0 no-repeat;

border:none;

overflow:hidden;

}

#file_browse_wrapper:hover {

background: url(../img/upload.png) 0 0 no-repeat;

}

#file_browse_wrapper:active {

background: url(../img/upload.png) 0 0 no-repeat;

}

#file_browse{

margin-left:-145px;

opacity:0;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);

} 

 <div id='file_browse_wrapper'>
 <input type='file' name="datei" id='file_browse'>
</div>