Ein Styling input type="file"

Habe ich gelesen über dieses von mehreren stellen.

Habe ich versucht die Methode finden Sie hier: http://www.quirksmode.org/dom/inputfile.html

Konnte ich nicht zum laufen bekommen. Also versuchte ich ein CSS/HTML-Methode und es funktioniert wunderbar in Firefox, Chrome, Safari und Opera (alle aktuellen Versionen) aber nicht in (Sie Ahnen es) IE8.

Sieht es in Ordnung, wenn Sie darauf klicken, es funktioniert nicht. Wenn Sie doppelklicken Sie darauf, es funktioniert.

Irgendwelche Ideen, wie man diese Arbeit mit einem Klick?

Momentan benutze ich den IE conditional comments, um Benutzer zu sagen, die mit dem IE doppelklicken Sie auf die select-Taste. Die Seite befindet sich derzeit in der design-und nicht Leben, um die Benutzer noch nicht und würde gerne dieses Problem lösen, bevor es live geht, wenn möglich.

Ein Styling input type="file" ...FML 🙂

InformationsquelleAutor L84 | 2011-07-02

2

Ich glaube, ich fand zwei Lösungen für Ihr problem. Sie mit: filter:alpha(opacity: 0)
auf Ihrem .file Klasse, wodurch die eigentliche "Durchsuchen..." - Schaltfläche, die Sie normalerweise sehen in den upload steuert.

Die erste Lösung wäre die Verwendung einer bedingten festlegen der CSS, dass Sie ersetzen Ihre Lust auf "Wählen Sie image" mit der normalen noch mit Stil "Durchsuchen" - button, wenn der Benutzer wird mit IE.

Die zweite würde sein, zu spielen mit der Größe der FileAttachment input und so die versteckten button "Durchsuchen..." passen würde, in die position des "Select" - Bild. Von dort müssen Sie nur noch sicherstellen, dass die z-index - Eigenschaft der Schaltfläche höher ist als die der Bild.

Lassen Sie mich wissen, wenn diese Lösungen lösen Ihre Bedürfnisse.

😀
- Können Sie den Stil der Schaltfläche "durchsuchen" im IE? Wie...? Der zweite hat nicht funktioniert. Wenn du den z-index des Bildes höher als die Schaltfläche "durchsuchen" können Sie nicht klicken Sie auf die Schaltfläche "durchsuchen". Das Bild sollte sehr nah an die gleiche Größe der Schaltfläche "durchsuchen", wenn nicht die exakt gleiche Größe.
- Es tut mir sehr Leid, wollte ich sagen, dass Sie sollten in der z-index der Schaltfläche, die höher ist als das Bild, nicht die andere Weise herum. Ich werde Bearbeiten meine Antwort sofort. Übrigens, die CSS bereits Formatvorlagen die Schaltfläche "durchsuchen", entfernen Sie die filter-Eigenschaft von Ihr .file-Klasse, und überprüfen Sie es heraus 🙂
- Ah ich habe Sie verstanden, meine Z-Index höher ist als das Bild => Auch ich sehe, wie die IE-styles der Datei input. Kann ich mit Leben, die vs mit meinem "wählen Sie" Bild. Gibt es eine Möglichkeit zum ändern der Datei-Eingang, damit er nicht gelb (wie auf meinem Bildschirm)? Danke!
- Ich nicht sehen, die Datei-Eingabe in gelb, wie du Sie beschrieben hast :/ ich habe versucht, in IE7, 8 und 9, aber ich sehe Sie immer noch in Grau. Könnten Sie mir einen screenshot :)?
- Es könnte sein, die Einstellungen in meinem computer, wenn man ihn in Grau. Hier ist ein screenshot - screencast.com/t/OH09OyYP Hinweis: IM IE 7 ist es Grau IE 8 ist es, wie Sie in dem screenshot sehen.
- Ich musste auch diesen trick, während der Umsetzung der zweiten Lösung, um die tatsächliche Datei-upload "Durchsuchen" - Taste, nehmen Sie den vollen Raum der Eltern - stackoverflow.com/questions/6487611/...
InformationsquelleAutor mario.tco

Eine schöne Lösung, die Ihnen erlaubt, um eine einzige auf der Arbeit ist, verwenden Sie ein label-element, und seine Eigenschaft "gut", die können Sie verbinden Sie es mit dem Eingang. Ein weiteres wichtiges element dieser Lösung ist die Anwendung der filter:alpha(opacity=0) auf das input-element.

HTML:

 <label for="fileupload"> 
     <input id="fileupload" type="file" >   
     <p>click here</p>
 </label>

CSS:

label {
   background-color: #ECECEC;
   display: block;
   width: 600px;
   height: 600px;
   cursor: pointer;
}

input[type="file"] {
   width: 100%;
   height: 100%;
   z-index: 100;
   position: relative;
   opacity: 0;
   filter:alpha(opacity=0); 
   cursor: pointer;
 }

Das ist die richtige Lösung! Perfekt danke.

InformationsquelleAutor Daniel Jankowski

3

Habe ich eine Lösung, die Ihnen helfen, den Stil der Taste, wie Sie möchten, und halten Sie es mit einem Klick in allen Browsern auch.

Im Grunde erstellen Sie einen div und gibst ihm eine Klasse oder id für Beispiele halber nennen wir diese "outer_div".

Dann legen Sie Ihre Datei-Eingang im inneren des "outer_div" und geben Sie eine id für dieses Beispiel nennen wir es "file_input_name".

Als Nächstes kommt die CSS...

Für die "outer_div" geben Sie die folgenden Eigenschaften
```
    #outer_div{
    cursor:pointer;
    overflow:hidden;
    display:block;
    float:left;
    position:relative;
    width:83px;
    height:25px;
    background:url(your button image goes here) no-repeat; 
    }
```
Stellen Sie sicher, dass Ihre Schaltfläche hat die gleiche Breite Eigenschaften für diese zu arbeiten.

Neben den CSS-Code für file_input_name:
```
  #file_input_name{
position:relative;
float:left;
cursor:pointer;
right:138px;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
text-align: right;
        }
```
Dies sollte den trick tun. Im Grunde, was passiert ist, wir setzen den file-input, so dass die Schaltfläche "durchsuchen" über Ihre hintergrund-Bild statt, wo sich die Datei-URL.

Habe ich dies getan, mein selbst und es funktioniert in IE und Firefox /safari /chrome.

Lassen Sie mich wissen, wie Sie zu erhalten oder wenn Sie weitere Hilfe benötigen.
- Dies löst nicht das problem von Doppel-Klick vs einfachen Klick, noch die Fläche, die für die Eingabe-Feld werden doppelt angeklickt, vs der Fläche von der einzigen Taste geklickt
InformationsquelleAutor Am_N
1

Den Grund müssen Sie klicken Sie doppelt ist, weil der "text area".

Das erste Bild hier ist von einem IE8 upload-Steuerelement. Beachten Sie, wie es ist, das Textfeld und der Schaltfläche. Der Benutzer einmal auf den button klickt ODER doppelklickt das Textfeld, um den Knopf.

[ arg, tut mir Leid, mein Ruf ist nicht hoch genug für Bilder ]

Wenn Sie überlagern, dass der text-Bereich ist überlappend, was Sie wollen, mit einem Klick, was es erfordert einen Doppelklick.

Das nächste Bild ist das gleiche Datei-upload-Steuerelement mit keine Deckkraft besitzt eine Schaltfläche, über die Spitze, und hat ein Umriss aus IE8 die DOM-Inspektor. Wenn ich auf die ganz Rechte Teil von der blauen Rechteck ein einziger Klick, jedes, wo sonst ist ein doppelter. Beachten Sie auch den text Bearbeiten Einfügemarke überlagert aus der Datei input-ontop die Taste.

[ Bild weggelassen ]

Die Lösung ist, um die Größe/position der Datei versteckte Datei input setzen die Schaltfläche "durchsuchen", wo Sie es wollen.

InformationsquelleAutor Joseph Lennox
1

Mit einigen Bootstrap Magie, ich habe es gemacht, ist super einfach.

Ok, nach dem einlegen der link zu Bootstrap-css - in Ihrem Kopf label, dies zu tun:

<div class="fileUpload btn btn-primary"> <span>Upload</span> <input type="file" class="upload" /> </div>

Erstellen einer input type file, gestylt durch die bootstrap-css.

Und jetzt kam der schwierige Teil:
```
  .fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
```
Und das ist alles, jetzt haben Sie eine funktionale Schaltfläche (input type file) mit Stil.

Fand ich dieser Artikel, weil ich hatte das gleiche problem, können Sie überprüfen Sie es für mehr info.

InformationsquelleAutor Rafa
0

Im Grunde ist es nicht dein problem eigentlich IE dauert ein Datei-upload-Steuerelement in unterschiedlicher Art und Weise.
Sie verstehen die Datei-upload-Steuerelement wie ein Textfeld und die Eingabe-Taste, wenn Sie einzelne klicken Sie auf Datei hochladen", Durchsuchen" oder "select" - Taste, es öffnet sich das Dialogfeld öffnen, aber wenn Sie einzelne klicken auf Datei hochladen text den Fokus der textbox und dann wieder klicken Sie auf das Textfeld, es öffnet sich das Dialogfeld öffnen. Sie können sagen, dies ist die vordefinierte bug im IE, also können wir nichts tun, und die meisten Benutzer kennen dieses problem.

InformationsquelleAutor Gaurav Agrawal
0

Wenn Ihr zu verbergen versucht die Standard-Eingabe-Taste, ohne dabei die Standard-IE8 Verhalten auf Eingabe-Datei und auch cross-browser-Unterstützung versuchen Sie die Anwendung
```
input.file{
   width:0 ; 
   height:0;
}  //supposing your file input has class of .file`   
```
in der css und Ihr gut zu gehen

InformationsquelleAutor M-Soley

Es ist schon eine Weile her, seit ich diese Frage gestellt, und unten ist die Methode, die ich jetzt verwenden für styling Datei-Eingänge. Diese info kommt von Codrops. Es geht viel mehr Details und bietet mehrere Beispiele, aber hier sind die Grundlagen:

HTML

 <input type="file" name="file" id="file" class="inputfile" />
 <label for="file">Choose a file</label>

MÜSSEN PRÜFEN, JS

<html class="no-js">
  <head>
      <!-- remove this if you use Modernizr -->
      <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
  </head>
</html>

CSS

.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 1.25rem;
    /* 20px */
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    /* 10px 20px */
}

.no-js .inputfile + label {
    display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}

;( function ( document, window, index )
{
    var inputs = document.querySelectorAll( '.inputfile' );
    Array.prototype.forEach.call( inputs, function( input )
    {
        var label    = input.nextElementSibling,
            labelVal = label.innerHTML;

        input.addEventListener( 'change', function( e )
        {
            var fileName = '';
            if( this.files && this.files.length > 1 )
                fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
            else
                fileName = e.target.value.split( '\\' ).pop();

            if( fileName )
                label.querySelector( 'span' ).innerHTML = fileName;
            else
                label.innerHTML = labelVal;
        });

        //Firefox bug fix
        input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
        input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
    });
}( document, window, 0 ));

InformationsquelleAutor L84

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.