HTML-Benutzerdefinierte Upload-Schaltfläche mit Hand Cursor auf schweben?

Question

Mit dem CSS-Style-Trick aus diesem Frage Ich konnte eine benutzerdefinierte Upload-Schaltfläche erstellen. Die Herausforderung besteht nun darin, den gesamten Teil der Schaltfläche so zu gestalten, dass sich das Mauszeigersymbol in das der Hand ändert.

Die Art und Weise, wie ich dies teilweise erreicht habe, ist wie folgt zu sehen hier (jSFiddle) . Wie Sie sehen können, erscheint der Cursor nur als Hand, wenn er über den rechten Bereich der Schaltfläche schwebt (ich verwende die neueste Version von Firefox).

Das css (auch auf jSFiddle)

 <span id="uploadMask">
    <input type="file" multiple="multiple" name="file" id="file_upload">
     <span class="button">Select Documents</span>
 </span>

Das css (auch auf jSFiddle)

#uploadMask {
  width:160px;
  display: block;
  float:left;
  overflow: hidden;
  height:32px;
  margin-right: 5px;
  position: relative;
}

#uploadMask input {
  position: absolute;
  top:0;
  bottom: 0;
  right:0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

#uploadMask .button {
  background:#ccc;
  line-height:24px;
  padding:5px 15px;
  display:block;
}

Irgendwelche Ideen?

Answer 1

Es gibt nichts, was man tun könnte, um die cursor Eigenschaft, um den "Text"-Teil von <input type="file"> aber der "Knopf"-Teil zeigt den Handzeiger an.

http://jsfiddle.net/gN2JM/17/

Kein Handcursor auf dem roten Teil!

In Anlehnung an die Antwort auf diese Frage:

Gibt es eine Möglichkeit, die systemeigene Schaltfläche "Durchsuchen" auf einer Dateieingabe browserübergreifend zu vergrößern?

Sie können die Schaltflächengröße durch Hinzufügen vergrößern:

#uploadMask input {
    font-size:200px; /* Any high number to guarantee it's big enough,
                        overflow:hidden on the parent takes care of the rest */
}

http://jsfiddle.net/gN2JM/15/

Answer 2

Wenn Sie die opacity: 0; werden Sie sehen, warum es einen Ort gibt, an dem die cursor:pointer taucht nicht auf. http://jsfiddle.net/gN2JM/13/ Wenn Sie mit der Maus über die aktuelle Schaltfläche fahren, erscheint der normale Cursor.

Utilice DIESE für eine Lösung, die angeblich immer funktioniert, oder stellen Sie einfach die Position der Schaltfläche so ein, dass sie über den Rand des Bildschirms hinausgeht>> http://jsfiddle.net/gN2JM/14/