web-dev-qa-db-de.com

Cursortyp bei Eingabetyp ändern = "Datei"

Einfache Frage ... Wie ändere ich den Cursor-Typ bei einem Datei-Eingabetyp?

Ich habe folgendes versucht:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style>
            input[type="file"] {
              cursor: pointer;
            }
        </style>
    </head>
    <body>
        <input type="file">
    </body>
</html>

Aus irgendeinem Grund wird es nicht Ball spielen. 

69
Tisch

In verschiedenen Browsern funktioniert das anders. Ich vermute, es liegt daran, dass die Art der Dateieingabe sehr speziell ist.

Welchen Browser/welche Version verwenden Sie?

Ich weiß, dass IE6 nicht unterstützt, den Typ im Stil anzugeben.

Wie es in den verschiedenen Browsern funktioniert

IE7 +

Funktioniert perfekt.

Feuerfuchs

Das Problem ist behoben, so dass es jetzt perfekt funktioniert. Siehe Fehlerbericht zu diesem Problem.
In Version 3.5 hat es überhaupt nicht funktioniert.

Chrome und Safari (identisches Verhalten)

Verwendet den Pfeil über der Schaltfläche, der definierte Cursor über dem Rest.

Oper

Funktioniert perfekt.


Beachten Sie, dass es mehrere Problemumgehungen gibt, die unterschiedliche Techniken verwenden, die dieses Problem umgehen. Die answer von BjarkeCK ist eine elegante Lösung, die ich mag, und sie funktioniert mit allen gängigen Browsern. 

40
awe

cursor:pointer funktioniert nicht nur aufgrund der Standardschaltfläche für die Eingabedatei. Kein besonderer Grund hier. Sie müssen das Erscheinungsbild über diesen Code entfernen, achten Sie auf font-size:0.

input[type='file']{
    opacity: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    font-size: 0;
    position: absolute;
}
<input type="file">
<img width="24" height="24" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADs0lEQVR42rWVa2iOYRjH9+zd+dw2oWaGwkjzRY5flDC1nBaxsTnVYkaWc8oHoZalETWHsVGkZo0yIyEmGzkWpZhDbBhmxE7v63fp/0j7YGq89e/+XfdzuJ7/dV/3/Tp+//nndHdD2o4RIQHBnilgIPL3+XytjuO0MkZ4O3zllevve3uUYMaulDxeePL0mruNXeaTmJ/IfMlfJZhekBLv+PuNBEPRq8427wN/jxPmeJxM4seoAH0yF+g9WonmVOTfK+o2weTNyZ6w2KC9fNFuQtz7AuF0+DV8Ft4GZ6OvxPXE7xlLGZ8wF4CLK39MMLNwZDoPJPPAHcJwOAiOhp/Ct+Ba3d9J/I3YEjUzTmNuNuwHd8DtcAg8FK4ica2jeuYyFKM4cyB1aGEz0BoUYw6QLWoEakLLUY25UOl+foSubaB8O1wHmWS+R+YadUojbEmi4WjYo4Rv5SCWMdic2LzYEjfBAXAynImDI78nqOXCWcIk2KsHgmB/+ARs6/BE8UDGuYw5KmkbfA5O1QckwfNJUOqWaCnDdVRuL5WsXO1oobrIXpYgJ9W6N9VKgdZRjmreUwqPReYgg7mjroMlZL5K5v2E8XA/2JKshc9okfui78QNxLaYdxgteQkcCVfCW+HX8LiuDqwFr6Ey1B/1Rm/QMJSP8lCkus4cNNheQbt032G5s4+qR8PRIhwccB1kk/kmmSsIB8GdcDVfkEbyU/B45ntZt3Ctg9icfGQ8zdwW+AY8WG36UA7m8XyZm2CxbrqkElmC2/AE+DKcCMeaC/W8nUUtWthVcJ0WtlXNMhmeS4LjXbvoolmF22ErwSh4BTzTuguFaRPadm9iXG0NAFfA1hQvtEaT4CwSHHLXYBHDLWQJ4lXnp2ifuuUYStRC2zPB6LwdYagQzdImeydNtaOFNTjoOsiSTXuot3q9BW6Bc+E62Hb7EOJQ4irGYsY5zO2E4+FmrYE5GA0vsJPWTbBMtbZWG6AyeJXgkxbTDsKXWoPBKp3tn2DY0c5vhp/BY7TIv9p0idrUNlAfnS3uUW6J3uqsaZM8OnPsQAyRfLr3g1rd2rTYdZAjB0WyGadzphHuBQfqhd+I39jX6p5OObCjIspaWQ7NQQ4OitwEm7hQRMYvfv/gx/vM2UIS7HFLtFG7tUUd1C67Udqdn63HVYpoufmuebtuR/kXlS9cu3w7H3zBTWB/laOxlqDNlABbu37VUWw9bn+lIdrBnxljbMPpno/6w7Hj/B383E4GEjzq9k+/p78fan0xNyGwEGgAAAAASUVORK5CYII=" />

Es funktioniert einwandfrei auf Chrome, Firefox und IE.  

29
Lewis

Wissen Sie, dass dies ein alter Faden ist. Aber die Google-Ergebnisse bringen dies zum Vorschein ... Ich habe gerade eine Teillösung für Chrome gefunden (nicht Flash, Javascript, zusätzliche DOM-Manipulation mit ausgeblendetem Überlauf).

  • firefox hat diesen Fehler behoben Fehler
  • safari (7 in diesem Moment) und Chrom haben kein identisches Verhalten
  • safari (7, Mac) hat für mich überhaupt nicht funktioniert
  • chrome (und vielleicht jetzt die Oper, wenn es sich um ein Webkit handelt) kann :: Pseudo-Klasse für Webkit-Datei-Upload-Schaltfläche verwenden

.

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
    cursor: pointer; 
}

Das Problem ist, dass button die Cursor-Eigenschaft im Allgemeinen nicht erbt (?) , sondern der Rest des Eingabefeldes [type = file] dose. Aus diesem Grund erhält Chrome den Zeiger außer der Schaltfläche

23
Endless

Ich habe diese Ausgabe heute getroffen und mit:

/* Chrome/Safari and web-kit-based browsers 
   (if it doesn't work, try maybe also on the parent/wrapper)
*/
::-webkit-file-upload-button {
    cursor:pointer;
}

/* IE11 (if it doesn't work, try maybe also on the parent/wrapper) */
input[type=file] {
    cursor:pointer;
}

Es scheint gut zu gehen :-)

14
madtyn

Wenn Sie Möchten, dass der Cursor in die Hand gesetzt wird, um ihn auf ein Bild zu setzen, ist hier ein

EINFACHE WEISE UND WIE FUNKTIONIERT ES IN ALLEN BROWSERN:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
     $("#file1").trigger('click');
});

Sie können dann auf eine beliebige Taste drücken, um die Datei hochzuladen, und Sie haben einen Zeiger-Cursor.


In Chrome und Opera wird der Cursor nur zum Zeiger auf die Auffüllung. Wenn display:block;, sollten Sie für diese Browser Folgendes tun:

<input type="file" id="file1"  name="file1" style="display:block; padding:29px 0 0 0;" />
10
ParPar

Ich habe folgendes gemacht:

<li>file<input id="file_inp" type="file" /></li>

für li:

li { /*...*/ position:relative; overflow:hidden; /*...*/ }

für die Eingabe:

input#file_inp { 
    /*...*/ 
    position: absolute; 
    width: 400px; 
    left: -200px; 
    top:0; 
    cursor: pointer; 
    /*...*/ 
}

Wie bereits erwähnt, wird der Cursor auf die gesamte Eingabe mit Ausnahme der Schaltfläche als "Zeiger" angezeigt. In den meisten Browsern befindet sich die Schaltfläche auf der linken Seite oder auf der rechten Seite. OK! Geben wir der Eingabe eine große Breite und zeigen nur die mittlere ... Schaltfläche wird ausgeblendet. Und anklickbar ist die gesamte Eingabe.

Das ist für mich in Ordnung.

6
oporkov

Wenn Sie versuchen, Ajax-Uploader auszuführen, versuchen Sie möglicherweise eine andere Technik für kompatible Browser wie FireFox und Chrome. Sie unterstützen das Auslösen eines Klickereignisses bei vollständig unsichtbarer Dateieingabe. Sie können die Dateieingabe auf beliebige Weise ausblenden, es sei denn, die Anzeigeeigenschaft wird auf none festgelegt. Einstellung {Höhe: 0; overflow: hidden} auf dem übergeordneten Formular wird den Trick ausführen. Ich benutze separate Formulare für jeden Uploader.

Leiten Sie das benutzerdefinierte Klickereignis für die Schaltfläche auf die Eingabe versteckter Dateien um, und Sie sind fertig.

Um diese Technik verwenden zu können, müssen Sie die Funktion navigator.userAgent auf Gecko- oder WebKit-Engine prüfen. Für andere Engines müssen Sie die alte Eingabemethode für transparente Dateien verwenden.

2
Harry

Chrome gab mir auch dieses Problem. Ich habe versucht, alle möglichen CSS-Selektoren einzustellen, aber nichts schien gut zu funktionieren. Mit dem FORM-Element habe ich jedoch eine Lösung gefunden. 

  1. benennen Sie Ihr Eingabeelement [Typ = Datei].
  2. benennen Sie Ihr Formularelement und geben Sie die Eingabe [Typ = Datei] ein.
  3. machen Sie eine Spanne und platzieren Sie sie unter der Eingabe im Formular. Dies wird dein Etikett sein.
  4. verwenden Sie CSS, um die Höhe der Eingabe auf 0px und die Deckkraft auf 0 zu setzen. Dadurch wird sie unsichtbar.
  5. stellen Sie die Spanne absolut und nach links auf 0px.
<style>
    #file {
        height:0px;
        opacity:0;
    }  
    #span {
        left:0px;
        position:absolute;
        cursor: pointer;
    }
</style>

<form name="form">
    <input type="file" id="file" name="file"/>
    <span id="span">My File label!!!!</span>
</form>

<script>
    var span = document.getElementById("span");
    span.onclick = function(event) {
        document.form.file.click(event);
    };
</script>

Ich habe dies in Chrome und FF getestet, nicht dh, aber ich hoffe, dass dies hilft . Jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/

1
alex

Zunächst einmal funktioniert Ihr Code in Internet Explorer, jedoch nicht in Firefox.

Zweitens erlaubt der W3C-CSS-Standard das Stilisieren komplexer Tags wie <input /> nicht. Auch für die Cursor-Eigenschaft.

Endlich siehe diese Seite . Ich habe seine Lösung nicht ausprobiert, also sagen Sie uns, ob und wie es funktioniert.

1
enguerran

Ich habe herausgefunden, dass es einen anderen Ansatz gibt, um es zu schaffen. Funktioniert perfekt in Opera New, FF, Chrome und Safari. Leider funktioniert es nicht perfekt in IE (aber gut genug für meinen Fall).

Die Idee ist, input=file-Element mit fester Größe div und ausgeblendetem Überlauf zu umschließen und cursor: pointer; festzulegen. Dann bewegen wir die Schaltfläche mit der linken Polsterung aus dem Div heraus.

<div class="input-file-wrap">
    <input class="file-input" type="file" />
</div>

und Beispielstile

.input-file-wrap {
    background: red;
    height: 33px;
    width: 240px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.file-input {
    width: 100%;
    height: 100%;
    opacity: 0;
    padding-left: 240px;
    margin-right: -240px;
    cursor: pointer;
}

Hier finden Sie ein Live-Beispiel: http://jsfiddle.net/5c5RH/2/

1
pawelkmpt

Versuchen Sie es mit:

input[type=file] {
  cursor: pointer; cursor: hand;
}

Sehen Sie, ob das funktioniert. Ich musste zeige + Hand in meine, damit es in FF/Chrome/etc funktioniert. Ich bin mir auch nicht sicher, ob es wichtig ist, aber ich glaube nicht, dass es in der CSS-Datei Anführungszeichen um 'file' gibt.

0
Jesse O'Brien
            <span class="btn btn-success fileinput-button">
                <span><i class="icon-plus icon-white"></i> Select Image</span>
                <input type="file" name="files[]">
            </span>

css: 

.btn {Cursor: Zeiger;}

Sie können es hier in Aktion sehen: http://blueimp.github.com/jQuery-File-Upload/

Es ist nicht das Jquery, das es tut. Es handelt sich um die Datei http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css . Ich habe mir gerade das gekauft, was ich brauchte, und es funktioniert auch ohne die Jquery.

0
Christina

Wie ich es gemacht habe: 

    /* Upoload */
#upload-profile-file {
    z-index: 1;
}
.uploadButton input[type="file"] {
    cursor:pointer;
    position:absolute;
    top:0px;
    opacity:0;
}
#upload-profile-file:hover ~ #upload-profile-pic-btn
{
    text-decoration:underline;
}

#upload-profile-pic-btn {
    z-index:-1;
}

Und dann auf meiner Ansichtsseite:

  <form id="upload-profile-pic-form">
                                                <div class="uploadButton">
                                                    <input type="file" id="upload-profile-file" name="upload" style="width: 88px; opacity:0.0; filter:alpha(opacity=0); " onchange='upload()'/>
                                                    <a id="upload-profile-pic-btn" href="#" class="expand">Upload</a>
                                                </div>
                                            </form>

Und dann sende ich mein Formular einfach über AJAX an den Server und erledige den Rest dort.

Also tl; dr -> Ich übertrage den Klick des sichtbaren Links (mit allen Stilen und Schnickschnack) und ich klicke tatsächlich auf die Dateieingabe. :)

Hoffe das hilft jemandem.

0
Martin

Basierend auf https://stackoverflow.com/a/3030174/2325676 - Blendet die Eingabe mit Deckkraft 0 aus. 

Um den Cursor für den gesamten Bereich zum Laufen zu bringen, muss der font-size auf einen Wert eingestellt werden, der größer als die Höhe der Schaltfläche ist, sodass die Schaltfläche für die Dateieingabe unter den sichtbaren Bereich gedrückt wird und sich der Mauszeiger im Textteil der Datei befindet Eingang:

<div style="display: block; width: 100px; height: 50px; overflow: hidden">
    <button style="width: 110px; height: 50px; position: relative; top: -5px; left: -5px;" ><a href="javascript: void(0)">Upload File</a></button>
    <input type="file" id="upload_input" name="upload" style="height:50px; width: 120px; opacity: 0; filter:alpha(opacity: 0);  font-size: 70px; position: relative; top: -50px; left: -20px; cursor:pointer" />
</div>
0