nicht angemeldet
Matthias Apsel
Auge
Gunnar Bittersmann
Auge
Auge
Gunnar Bittersmann
Auge
Hi,
ich versuche gerade den "browse" Button eines upload Feldes eines Formulars zu stylen
<form id="fo" action="" method="post" enctype="multipart/form-data">
<input name="file" type="file" id="fileElem" />
</form
~~~>
folgendes CSS
~~~css
#fileElem
{ color: aqua;
background-color: red;
}
styled nur den Hintergrund des gesamten Elementes und die filenames der hochzuladenden Dateien,
Wie kann ich den "Browse" Button stylen.
Weiss jemand Rat?
Danke Suse
Om nah hoo pez nyeetz, Suse!
ich versuche gerade den "browse" Button eines upload Feldes eines Formulars zu stylen
Lass deinen Nutzern ihre gewohnten Bedienungselemente.
Matthias
ich versuche gerade den "browse" Button eines upload Feldes eines Formulars zu stylen
Lass deinen Nutzern ihre gewohnten Bedienungselemente.
Diese canceln aber die Compliance mit der Social Identity unserer Unternehmenskultur, plus erlauben es den Kunden nicht, ein optimales Web-Erlebnis zu genießen. Außerdem findet meine Sekretärin die Farbgebung hässlich, das ist so Webeinspunktnull, sagt sie.
Om nah hoo pez nyeetz, Suse!
ich versuche gerade den "browse" Button eines upload Feldes eines Formulars zu stylen
Lass deinen Nutzern ihre gewohnten Bedienungselemente.
Keine sehr hilfreiche Antwort.
Was soll dagegen sprechen, einem Button einen Style zuzuordnen.
Wäre sehr dankbar, wenn jemand, der weiss wie das geht einen Hinweis gibt.
Wäre sehr dankbar, wenn jemand, der weiss wie das geht einen Hinweis gibt.
so lassen, wie es das OS, bzw. der Browser verschlägt - vorgibt...
@Matthias
Lass deinen Nutzern ihre gewohnten Bedienungselemente.
In den Zeiten der IPhone Generation, deiniere „gewohnt“ ;-)
#fileElem
{ color: aqua;
background-color: red;
}
funktioniert doch: Button rot und Schrift blau !? :-)
Welchen Browser nutzt du den?
Hast du die id="fileElem" doppelt?
Viele Grüße aus LA
hier eine Anleitung
Hi Ralphi,
tausend Dank, erklärt den Sachverhalt und löst mein Problem perfekt.
ciao Suse
Hallo
hier eine Anleitung
tausend Dank, erklärt den Sachverhalt und löst mein Problem perfekt.
Perfekt ist anders. Bei mir funktioniert die Lösung keineswegs. Das liegt daran, dass ich JavaScript erst bei Bedarf und Vertrauen zulasse. Ich vertrete damit keineswegs die Mehrheit, aber „perfekt“ bedeutet für mich 100% und ist wegen (nicht nur) mir nicht erreichbar.
Denke also daran, dass es in Einzelfällen zu Rückmeldungen, dass das nicht funktioniert, kommen kann.
Tschö, Auge
@@Auge:
nuqneH
Perfekt ist anders. Bei mir funktioniert die Lösung keineswegs. Das liegt daran, dass ich JavaScript erst bei Bedarf und Vertrauen zulasse. Ich vertrete damit keineswegs die Mehrheit, aber „perfekt“ bedeutet für mich 100% und ist wegen (nicht nur) mir nicht erreichbar.
Deshalb: Den zusätzlichen Button nicht ins HTML schreiben, sondern mit JavaScript generieren.
Qapla'
Hakuna matata!
Perfekt ist anders. Bei mir funktioniert die Lösung keineswegs. Das liegt daran, dass ich JavaScript erst bei Bedarf und Vertrauen zulasse.
Auch mit aktiviertem JavaScript funktioniert der Button nicht, zumindest in einem aktuellen Chrome passiert bei einem Klick einfach nichts.
Im übrigen ist das eine von den wenigen Seiten, bei denen sogar ich JavaScript deaktiviert haben möchte. Das Scrollen auf der Seite verursacht bei mir physische Schmerzen. Insbesondere möchte man keine Tipps von einem Autor entgegen nehmen, für den Benutzerfreundlichkeit und Zugänglichkeit Fremdworte sind.
Hallo
Perfekt ist anders. Bei mir funktioniert die Lösung keineswegs. Das liegt daran, dass ich JavaScript erst bei Bedarf und Vertrauen zulasse.
Auch mit aktiviertem JavaScript funktioniert der Button nicht, zumindest in einem aktuellen Chrome passiert bei einem Klick einfach nichts.
Soweit habe ich es erst garnicht kommen lassen (wenn auch mit FF statt Chromium).
Im übrigen ist das eine von den wenigen Seiten, bei denen sogar ich JavaScript deaktiviert haben möchte. Das Scrollen auf der Seite verursacht bei mir physische Schmerzen.
Was einem so alles erspart bleibt. :-)
Insbesondere möchte man keine Tipps von einem Autor entgegen nehmen, für den Benutzerfreundlichkeit und Zugänglichkeit Fremdworte sind.
Naja, zumindest in Hinsicht auf Usability. Vielleicht kann er ja andere Dinge besser.
Für mich ist es einfach so, dass Formularelemente vom OS kommen und genau deshalb nicht angerührt gehören. Sie sind so, wie sie sind, für den Benutzer aus allen anderen Programmfenstern [1] bekannt und sollen so, wie sie halt sind, auch im Browser bzw. der im Browser angezeigten Seite angezeigt werden.
Den Vogel in Hinsicht auf das Verstümmeln der Formular-Elemente in einer Webanwendung schoss ein Programmierer in meiner letzten Firma ab, der die Ränder der Eingabefelder ausblendete und stattdessen eine 1px breiten border-bottom anzeigte. Das Ganze natürlich – wie es sich heutzutage gehört – mit weißem Hintergrund auf weißem Hintergrund. Und als wäre das noch nicht genug, benutzte er den border-bottom auch zur Anzeige von Werten, die nicht in einem Formular zur Bearbeitung anstanden. Da war dann, um herauszubekommen, was Text und was Eingabefeld ist, ein fröhliches Herumklicken angesagt. Was war das ein Juché und Jucheissassa! Welch Jubel und Trubel. Wir fielen und vor Freude in die Arme [2].
Der in seinem Sehvermögen eingeschränkte Mitarbeiter, den ich einarbeiten sollte, hat sich über das nicht nach Formular aussehende Formular besonders gefreut. Der hat mit seiner Bildschirmlupe einfach nur die Striche auf weißem Grund gesehen und nicht mal im Traum vermutet, dass sich dahinter Formularfelder verstecken *könnten*. Der war völlig orientierungslos.
Ich bin da zwar schon über ein Jahr nicht mehr, rechtschaffen aufregen kann ich mich darüber aber immer noch [3].
[1] Ausnahme sind jene Programmfenster, in denen die Autoren die Styleguidelines der OS-Hersteller missachten. Warum sieht das Programmfenster eines XY-Programmes – und ich rede nicht von Spielen, bei denen die UI zur (Ein-)Stimmung gehört – unter Windows7 so aus, wie unter Windows8 und nicht, wie es sich gehört, wie unter Windows7 [3]?
[2] siehe [3]
[3] *grml* *gargelarks*
Tschö, Auge
Hakuna matata!
Den Vogel in Hinsicht auf das Verstümmeln der Formular-Elemente in einer Webanwendung schoss ein Programmierer in meiner letzten Firma ab, der die Ränder der Eingabefelder ausblendete und stattdessen eine 1px breiten border-bottom anzeigte. Das Ganze natürlich – wie es sich heutzutage gehört – mit weißem Hintergrund auf weißem Hintergrund.
1px ist zu dünn, aber mit geringfügig dickerem Rahmen, Platzhalter und Label kann man so ästhetische und auch gut erkennbare Formularfelder erzeugen. Das sieht auch Google so. Ich zitiere hier Google nicht einfach, weil es Google ist, sondern weil sie unfassbar viel Ressourcen in UI-Design und -Forschung stecken.
Und als wäre das noch nicht genug, benutzte er den border-bottom auch zur Anzeige von Werten, die nicht in einem Formular zur Bearbeitung anstanden.
Das ist in der Tat ein Design-Fehler.
[1] Ausnahme sind jene Programmfenster, in denen die Autoren die Styleguidelines der OS-Hersteller missachten.
Bei Desktop-Anwendungen fließt bis heute kaum Energie in UI-Design. Es gibt eine handvoll UI-Frameworks: .NET, Qt, KDE, Java (Swing) und noch ein paar weitere, aber sie sperren die Anwendungsentwickler alle in ein starr vorgegebenes Design ein.
Gute UserInterfaces entstehen heute da, wo man den Entwicklern noch eine Wahl lässt. Und das ist im Web. Die Grundlagen-Technologien HTML+CSS+JS bieten unbegrenzte Möglichkeiten. Das sickert allmählich auch zu den Desktop- und Mobile-Entwicklern durch und in den letzten Jahren haben diese Web-Grundbausteine vermehrt ihren Weg in den nativen Bereich gefunden.
Die jüngste Meldung in diesem Migrations-Prozess macht Android, die zukünftig die Lücke zwischen Webapps und nativen Apps schließen möchten, siehe: http://updates.html5rocks.com/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android
Hallo
Den Vogel in Hinsicht auf das Verstümmeln der Formular-Elemente in einer Webanwendung schoss ein Programmierer in meiner letzten Firma ab, der die Ränder der Eingabefelder ausblendete und stattdessen eine 1px breiten border-bottom anzeigte. Das Ganze natürlich – wie es sich heutzutage gehört – mit weißem Hintergrund auf weißem Hintergrund.
1px ist zu dünn, aber mit geringfügig dickerem Rahmen, Platzhalter und Label kann man so ästhetische und auch gut erkennbare Formularfelder erzeugen.
Öhhm, da war kein Rahmen, da war nur eine Unterstreichung. Einfach nur ein Strich auf weißer Fläche. Auch Label, die beim überfahren mit der Maus eine Rückmeldung gegeben hätten, wurden nicht eingesetzt. Von Platzhaltern wollen wir erst garnicht anfangen.
Mit einem Rahmen, der tut, was der halt so macht, nämlich etwas einzurahmen, sieht das natürlich anders aus; erst recht, wenn zusätzlich Platzhalter zum Einsatz kommen. Das weist für mich auf eine Eingabemöglichkeit hin.
[1] Ausnahme sind jene Programmfenster, in denen die Autoren die Styleguidelines der OS-Hersteller missachten.
Bei Desktop-Anwendungen fließt bis heute kaum Energie in UI-Design. Es gibt eine handvoll UI-Frameworks: .NET, Qt, KDE, Java (Swing) und noch ein paar weitere, aber sie sperren die Anwendungsentwickler alle in ein starr vorgegebenes Design ein.
Die Gedanken zum UI-Design sollten sich eigentlich die OS- bzw. Windowmanager-Hersteller machen. Vorausgesetzt, da kommt etwas sinnvolles heraus, muss ich das erstens als Anwendungsentwickler nicht tun und ermögliche zweitens dem Nutzer ein systemweit durchgängig gleichartiges Bedienkonzept, so ich den Vorgaben der Bibliotheken folge. Apple ist da ja relativ erfolgreich.
Gute UserInterfaces entstehen heute da, wo man den Entwicklern noch eine Wahl lässt. Und das ist im Web. Die Grundlagen-Technologien HTML+CSS+JS bieten unbegrenzte Möglichkeiten.
Klar im Web kannst du frei designen, aber auch frei Mist erfinden. Beides passiert, das Letztere meinem Empfinden nach leider im Übermaß.
Seiten (nicht Webanwendungen!), die sich ohne JavaScript nicht einmal ansatzweise ansehen, geschweige denn bedienen lassen. Wenn ich dann meiner Neugier nachgebe und JS für die Seite zulasse, passiert oft nichts. Dafür muss ich drei weitere Quellen für JS zulassen und nach den Neuladen passiert … wiederum nichts, weil es noch weiterer acht Quellen bedarf, damit die Seite funktioniert.
Ich weiß, das hat an sich nichts mit UI-Design zu tun. Es sind aber die praktischen Auswirkungen … ähh, eher Auswüchse der Freiheit des Designs im Web. Wo viel ausprobiert wird, kommt halt auch! viel Scheiße bei raus.
Die guten Ergebnisse verbreiten sich leider nicht schnell und großflächig genug um das Bewusstsein der Masse zu durchdringen. Vielleicht auch, weil sie oft genug ohne den Schnickschnack daherkommen, der die Unbedarften erstaunen lässt.
Tschö, Auge
Hi,
Die jüngste Meldung in diesem Migrations-Prozess macht Android, die zukünftig die Lücke zwischen Webapps und nativen Apps schließen möchten, siehe: http://updates.html5rocks.com/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android
coole Alternative zu Phonegap. Nicht schlecht :-)
Viele Grüße aus LA
Perfekt ist anders. Bei mir funktioniert die Lösung keineswegs. Das liegt daran, dass ich JavaScript erst bei Bedarf und Vertrauen zulasse.
In größeren Anwendungen läuft ohne JavaScript sowieso nix. Da würde man einen Uploadbutton stylen wollen.
Auch mit aktiviertem JavaScript funktioniert der Button nicht, zumindest in einem aktuellen Chrome passiert bei einem Klick einfach nichts.
Die Demo ist kaputt, das ist alles. Es gibt eine Exception auf der JS-Konsole "$ not found". Der Ansatz selbst funktioniert. Habe ich auch in meinem Posting beschrieben
Insbesondere möchte man keine Tipps von einem Autor entgegen nehmen, für den Benutzerfreundlichkeit und Zugänglichkeit Fremdworte sind.
Das ist unlautere Argumentation. Es sagt nichts über seine Lösung des Uploadbutton-Problems aus, wenn der Autor ansonsten eine kaputtgecodete Seite hat. Hast du inhaltlich etwas gegen die Lösung einzuwenden? Daß sie JavaScript voraussetzt ist bekannt, ich hab auch eine ohne JS gezeigt.
MfG
Nico
@@Nico2:
nuqneH
In größeren Anwendungen läuft ohne JavaScript sowieso nix.
Ob eine Anwendung auch ohne JavaScript läuft, hat nichts mit deren Größe zu tun, sondern damit, ob man JavaScript voraussetzt oder als progressive enhancement betrachtet.
Die Demo ist kaputt, das ist alles.
Ein Artikel mit kaputter Demo ist unglaubwürdig, das ist alles.
Insbesondere möchte man keine Tipps von einem Autor entgegen nehmen, für den Benutzerfreundlichkeit und Zugänglichkeit Fremdworte sind.
Das ist unlautere Argumentation.
Sehe ich nicht so. Was unlauter ist, ist die Weitergabe von schlechtem Wissen. Woher sollen die Leser denn Kenntnisse über Benutzerfreundlichkeit und Zugänglichkeit erlangen, wenn es ihnen in Artikeln falsch vorgemacht wird?
Qapla'
Ein Artikel mit kaputter Demo ist unglaubwürdig, das ist alles.
Kann halt mal passieren. Da gibts bei Selfhtml sicher auch dutzende kaputte Demos. Das heißt nicht dass der Ansatz nicht funktioniert. Wenn du es "unglaubwürdig" findest, kannst du es ja ausprobieren.
Insbesondere möchte man keine Tipps von einem Autor entgegen nehmen, für den Benutzerfreundlichkeit und Zugänglichkeit Fremdworte sind.
Das ist unlautere Argumentation.
Sehe ich nicht so. Was unlauter ist, ist die Weitergabe von schlechtem Wissen.
Wer hat wo schlechtes Wissen weitergegeben??
Woher sollen die Leser denn Kenntnisse über Benutzerfreundlichkeit und Zugänglichkeit erlangen, wenn es ihnen in Artikeln falsch vorgemacht wird?
Was macht der Artikel falsch vor??
Mir scheint du hast nichts zur Sache beizutragen. Hier ging es um das Stylen eines Uploadbutton und ihr redet stattdessen über irgendeine private Homepage, die durch Spielereien unbenutzbar ist. Auch auf Nachfrage kommt nix. Okay.
MfG
Nico
Hallo
Ein Artikel mit kaputter Demo ist unglaubwürdig, das ist alles.
Kann halt mal passieren. Da gibts bei Selfhtml sicher auch dutzende kaputte Demos. Das heißt nicht dass der Ansatz nicht funktioniert.
Die Demo und damit der technische Ansatz funktioniert unter bestimmten Bedingungen.
Woher sollen die Leser denn Kenntnisse über Benutzerfreundlichkeit und Zugänglichkeit erlangen, wenn es ihnen in Artikeln falsch vorgemacht wird?
Was macht der Artikel falsch vor??
Er macht etwas funktionierendes kaputt, um es so umzubauen, dass es nur noch unter bestimmten Bedingungen funktioniert. Es also schick aussehen zu lassen um den Preis, dass es nicht mehr überall funktioniert.
Und das liegt nicht daran, dass die Demo als solche kaputt ist. Es liegt daran, dass das Kozept kaputt ist, weil es JavaScript zwingend voraussetzt aber falsch benutzt.
Dröseln wir das mal auf. Es wird ein Uploadbutton verwendet, der per CSS ausgeblendet wird. Es wird ein Button eingebaut, der entgegen dem ausgeblendeten Uploadbutton per CSS gestaltbar ist. Wird dieser angeklickt, soll er per JavaScript etwas an den Uploadbutton übergeben. So weit, so gut.
Der ganze Kram funktioniert ohne JavaScript nicht. Nun kannst du natürlich sagen, kein JavaScript: Pech gehabt. Das ist aber falsch herum gedacht. JS soll das Verhalten von Programmen – inklusive Webanwendungen – verbessern. Hier wird das bereits vorhandene Verhalten aber unnötigerweise kaputt gemacht.
Warum wird der Uploadbutton in jedem Fall ausgeblendet? Warum wird das nicht ausschließlich dann gemacht, wenn JS auch zur Verfügung steht und der „schöne“ Button auch zum Einsatz kommen kann? Warum wird stattdessen ohne JavaScript ein „schöner“ Button erzeugt, der ohne JavaScript nicht funktioniert, der also beim einen oder anderen sinnlos auf der Seite „rumlungert“?
Hätte der Autor beschrieben, wie der Button _bei_aktivem_JS_ ausgeblendet, der andere stattdessen, also ebenfalls nur _bei_aktivem_JS_ eingefügt und funktionstüchtig gemacht wird, würde sich hier kaum jemand echauffieren. Aber so ist das einfach nur falsch und somit Mist.
Was macht der Artikel falsch vor??
War das eben ausführlich genug?
Tschö, Auge
Und das liegt nicht daran, dass die Demo als solche kaputt ist. Es liegt daran, dass das Kozept kaputt ist, weil es JavaScript zwingend voraussetzt aber falsch benutzt.
Die meisten Websites setzen heutzutage JavaScript zwingend voraus, insb. welche mit Dateiupload. In der Theorie hast du recht dass man für Dateiupload kein JS braucht. In der Praxis will ich eine Website mit Dateiupload sehen die ansonsten auch ohne JS komplett funktioniert.
Der ganze Kram funktioniert ohne JavaScript nicht.
Da waren wir schon vor fünf Postings und es war Gunnar der schon am 18.11. die Lösung dafür geschrieben hat.
https://forum.selfhtml.org/?t=218787&m=1507653
Nun kannst du natürlich sagen, kein JavaScript:
Habe ich nicht gesagt. Ich hab sogar eine Lösung ganz ohne JS gepostet falls es dir nicht aufgefallen ist.
Warum wird das nicht ausschließlich dann gemacht, wenn JS auch zur Verfügung steht
s.o.
Hätte der Autor beschrieben, wie der Button _bei_aktivem_JS_ ausgeblendet, der andere stattdessen, also ebenfalls nur _bei_aktivem_JS_ eingefügt und funktionstüchtig gemacht wird, würde sich hier kaum jemand echauffieren.
Scheinbar echauffieren sich die Leute hier einfach gerne anstatt kurzerhand eine bessere Lösung zu posten.
War das eben ausführlich genug?
Leider hat dein Posting überhaupt nichts neues angemerkt was nicht schon letzte Woche als konstruktiver Verbesserungsvorschlag gepostet wurde.
MfG
Nico
@@Nico2:
nuqneH
Die meisten Websites setzen heutzutage JavaScript zwingend voraus, insb. welche mit Dateiupload. In der Theorie hast du recht dass man für Dateiupload kein JS braucht. In der Praxis will ich eine Website mit Dateiupload sehen die ansonsten auch ohne JS komplett funktioniert.
Ich verweise an der Stelle nochmal auf Jeremy Keith’ Artikel Just what is it that you want to do? Kamera-App als Dateiupload, progressively enhanced.
Qapla'
Hi,
Ich verweise an der Stelle nochmal auf Jeremy Keith’ Artikel Just what is it that you want to do? Kamera-App als Dateiupload, progressively enhanced.
Mir ist klar, daß es theoretisch möglich ist. Und ich habe auch nix gegen "Progressive Enhancement" solange es einfach umzusetzen ist wie beim Uploadbutton (entweder ohne JS oder mit "sicherem" JS).
Man muss "Progressive Enhancement" pragmatisch sehen. Selbst unter Verfechtern davon ist es mittlerweile okay JavaScript vorauszusetzen. Weil alle Browser es zu einem gewissen Grad unterstützen und es total nützlich ist. Moniert wird eher wenn die Seite nicht initialisiert ist, während dicke Javascripte noch laden.
Was bei den Beispielen im Text fehlt ist die Produktsicht, oder auch "Business Case" auf englisch. Keiner baut eine HTML5 App mit dem Ziel alle Browser zu unterstützen. Ein erfolgreiches Produkt bietet ein Minimum an Komfort und muss von anderen zu unterscheiden sein. Gerade im Mobilbereich ist es unmöglich den letzten Müllbrowser zu unterstützen, nur weil in China noch IE 6 und Android 2.3 dominieren. Manche ältere Mobile Browser haben keine Unterstützung für File Inputs, jedoch für JavaScript.
MfG
Nico
Hi,
Der Upload-Button lässt sich aus versch. Gründen nicht stark verändern. Mestens wird getrickst etwa bekommt der Button opacity:0.01 und wird mit position:absolute über einen eigenen Button gelegt.
.upload-container {
position: relative;
display: inline-block;
padding: 15px 35px;
border-radius: 4px;
color: white;
background-color: #28699d;
}
.upload-field {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.2; /* Höher als nötig zur Erklärung */
}
<div class="upload-container">
Datei hochladen
<input type="file" class="upload-field">
</div>
Oder mit JavaScript wird der Klick auf einen Button an den Input weitergegeben.
<p>
<button class="upload-buttno">Datei hochladen</button>
<input type="file" class="upload-field">
</p>
<script>
[code lang=javascript]document.querySelector('.upload-buttno').addEventListener('click', function() {
document.querySelector('.upload-field').click();
});
</script>[/code]
Dann sollte der Datei Auswahl Dialog aufgehen.
Wenn das nicht unbedingt nötig ist, würde ich mir nich die Mühe machen zumal man die Tricks in allen Browsern testen muß. Der normale Upload Button erfüllt seinen Zweck oder?
Nico
Hallo Suse,
Wie kann ich den "Browse" Button stylen.
vielleicht hilft dir dieses etwas weiter http://feelleicht.com/fileupload-button-mit-css-stylen/ es ist auch ein Live Beispiel mit dabei: http://jsfiddle.net/3Gfx6/3/ aber wie die anderen es dir schon gesagt haben, von solchen Sachen würde ich die Finger lassen, die User sind gewohnt wie ein Button aussieht.