CSS-Cursor funktioniert nicht in Chrome

Question

Ich verwende this script, um eine Profilbild-Upload-Funktion auf meiner Website zu betreiben. Es zeigt ein Bild mit einem Overlay Banner über den Boden:

Wenn über dieses Overlay Banner mousing, die CSS "cursor: pointer" Deklaration funktioniert gut in den Browsern ich außer für Chrome getestet habe . Bei Chrome für Windows und Mac wird der Mauszeiger nur an den Kanten dieser Überlagerung angezeigt. Wenn der Mauszeiger über den Text "Foto ändern" bewegt wird, wird der Cursor zum Pfeil zurückbewegt.

Hier ist der relevante HTML:

<div id="imgChange"> 
    Change Photo 
    <input type="file" accept="image/*" name="image_upload_file" id="image_upload_file"> 
    <input type="hidden" name="user_id" id="user_id" value="16"> 
</div> 

Und hier ist die entsprechende CSS:

#imgChange input[type="file"] { 
    cursor: pointer; 
    } 

ich zusammen eine Seite gesetzt haben demonstriert das Problem here.

Wer weiß, was das Problem sein könnte?

Answer 1

Ich bin nicht wirklich sicher, warum dieses Problem auftritt, aber es scheint, die Höhe des Eingangselements zu 60px Einstellung wird das Problem behoben:

#imgChange input[type="file"] { 
    bottom: 0; 
    cursor: pointer; 
    height: 60px;  /* <-- */ 
    left: 0; 
    margin: 0; 
    opacity: 0; 
    padding: 0; 
    position: absolute; 
    width: 100%; 
    z-index: 0; 
} 

Die Höhe des Elements ist 30px aber aus irgendeinem Grund die doppelte Höhe muss angewendet werden.