IPB

Willkommen, Gast ( Anmelden | Registrierung )

> File-Upload mit CSS formatieren
Thomas
Beitrag 15.05.2008 - 14:48
Beitrag #1


Nachschlagewerk des Orakels
Gruppensymbol

Gruppe: Mods
Beiträge: 955
Mitglied seit: 29.08.2006
Wohnort: Frankfurt am Main
Mitglieds-Nr.: 6.217



Auf der Suche nach einer browserübergreifenden Lösung für dieses Problem bin ich auf folgende Seite gestoßen. Leider etwas zu umfangreich für mich, außerdem sollte das Ganze auch ohne JS funktionieren. Falls jemand der Mitlesenden noch eine JS-freie Lösung parat hat, bitte hier melden.
Go to the top of the page
 
+Quote Post
 
Start new topic
Antworten
Cchater
Beitrag 16.01.2009 - 10:27
Beitrag #2


Rookie


Gruppe: User
Beiträge: 1
Mitglied seit: 16.01.2009
Mitglieds-Nr.: 7.650



Hallo,
es ist möglich inputfelder des types "file" zu formatieren, bzw über einen kleinen umweg:
css:
QUELLTEXT
div.fileinput {
    position: relative;
}

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

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

Und hier der Passende HTML-Text:
QUELLTEXT
<form>
<h1>Hallo Welt!</h1>
    <div class = "fileinput" >
        <input type="file" name = "file1" id="file1" class = "file" onchange = "file2.value = this.value;" tabindex = "1">

    <span class = "faux">
        <input type="text" name = "file2" id="file2" style = "border:1px Black dotted;" >
        <input type = "button" name = "button" id = "button" value = "Durchsuchen..." style = "border:1px Black Solid;Background:Lightblue;color:Darkblue" />
    </span>    
</div>
</form>

Muss jeder selber gucken, wie er sich das CSS zusammenbastelt...

Gruß Cchater
Go to the top of the page
 
+Quote Post

Beiträge in diesem Thema


Reply to this topicStart new topic
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:

 



RSS Vereinfachte Darstellung Aktuelles Datum: 13.05.2025 - 15:39

taschenkalender
expertise-panel IPS Driver Error

IPS Driver Error

There appears to be an error with the database.
You can try to refresh the page by clicking here