web-dev-qa-db-fra.com

Changer le type de curseur sur input type = "file"

Question simple ... Comment changer le type de curseur sur un type de fichier?

J'ai essayé ce qui suit:

<!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>

Pour une raison quelconque, il ne jouera pas la balle. 

htmlcssinput
69
Tisch

Cela fonctionne différemment dans différents navigateurs. Je suppose que c'est parce que le type d'entrée de fichier est assez spécial.

Quel navigateur/version utilisez-vous?

Je sais que IE6 ne permet pas de spécifier le type dans le style.

Comment ça marche dans les différents navigateurs

IE7 +

Marche parfaitement.

FireFox

Le problème est résolu, donc maintenant cela fonctionne parfaitement. Voir rapport de bogue sur cette question.
Dans la version 3.5, cela ne fonctionnait pas du tout.

Chrome et Safari (comportement identique)

Utilise la flèche sur le bouton, mais le curseur défini sur le reste.

Opéra

Marche parfaitement.

Notez qu'il existe plusieurs solutions de contournement utilisant différentes techniques pour résoudre ce problème. La answer de BjarkeCK est une solution élégante que j'aime bien et qui fonctionne sur tous les principaux navigateurs. 

40
awe

cursor:pointer ne fonctionne pas sur le fichier d'entrée uniquement à cause du bouton par défaut. Aucune raison particulière ici. Vous devez supprimer son apparence via ce code, faites attention avec 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=" />

Cela fonctionne parfaitement sur Chrome, Firefox et IE.  

29
Lewis

Sache que c'est un vieux fil. Mais les résultats de Google soulèvent cette question ... Je viens de trouver une solution partielle au chrome (non-inversion de la manipulation flash, javascript, DOM supplémentaire avec débordement masqué)

  • firefox a corrigé ce problème bug
  • safari (7 en ce moment) et chrome n'ont pas un comportement identique
  • safari (7, mac) ne fonctionne pas du tout pour moi
  • chrome (et peut-être l'opéra maintenant quand c'est webkit) peut utiliser :: pseudo-classe :: webkit-file-upload-button

.

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

Le problème est que ce bouton n'hérite pas de la propriété curseur en général (?) mais le reste de la dose de champ d'entrée [type = fichier] . C'est pourquoi chrome obtient le pointeur sauf le bouton

23
Endless

J'ai rencontré ce problème aujourd'hui et avec:

/* 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;
}

Cela semble bien se passer :-)

14
madtyn

Si Vous voulez forcer le curseur à être main pour le mettre sur une image, voici un

FAÇON SIMPLE ET COMMENT CELA FONCTIONNE DANS TOUS LES NAVIGATEURS:

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');
});

Ensuite, vous pouvez appuyer sur n'importe quel bouton pour télécharger un fichier et vous disposez d'un curseur de pointeur.

Dans Chrome et Opera, le curseur devient un pointeur sur le remplissage uniquement et si display:block;, vous devez procéder de la sorte pour ces navigateurs:

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

J'ai fait ce qui suit:

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

pour li:

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

pour l'entrée:

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

Comme il a été mentionné précédemment, le curseur devient un "pointeur" sur l'ensemble de l'entrée, à l'exclusion du bouton. Dans la plupart des navigateurs, le bouton est situé à gauche ou à droite. D'accord! Permet de donner à l'entrée une largeur énorme et d'afficher uniquement le milieu ... Le bouton sera caché. Et cliquable est l'entrée entière.

Ça marche pour moi.

6
oporkov

Si vous essayez de télécharger Ajax, vous pouvez essayer une autre technique pour les navigateurs compatibles tels que FireFox et Chrome. Ils prennent en charge le déclenchement d’un événement clic sur une entrée de fichier totalement invisible. Vous pouvez masquer l'entrée de fichier de la manière que vous voulez, sauf en définissant sa propriété d'affichage sur none. Réglage {hauteur: 0; overflow: hidden} sur le formulaire parent fera l'affaire. J'utilise des formulaires distincts pour chaque téléchargeur.

Réorientez votre événement de clic de bouton personnalisé vers l'entrée de fichier caché et vous avez terminé.

Pour utiliser cette technique, vous devez effectuer une vérification de navigator.userAgent pour le moteur Gecko ou WebKit. Pour les autres moteurs, vous devez utiliser l'ancienne méthode de saisie de fichier transparent.

2
Harry

Chrome me donnait aussi ce problème. J'ai essayé de définir toutes sortes de sélecteurs CSS, mais rien ne semblait bien fonctionner. Cependant, j'ai trouvé une solution en utilisant l'élément FORM. 

  1. nommez votre élément input [type = file].
  2. nommez votre élément de formulaire et mettez-y l'entrée [type = fichier].
  3. faites une étendue et placez-la sous l'entrée dans le formulaire. Ce sera votre étiquette.
  4. utilisez CSS pour définir la hauteur de l'entrée sur 0px et l'opacité sur 0, cela la rendra invisible.
  5. faire la travée positionnée absolument et à gauche 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>

J'ai testé cela dans Chrome et FF, pas, mais j'espère que cela aidera . Jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/

1
alex

Tout d’abord, votre code fonctionne sous Internet Explorer, mais pas sous Firefox.

Deuxièmement, la norme Css W3C ne permet pas de styler des balises complexes telles que <input />. Même pour la propriété du curseur.

Enfin, voir cette page . Je n'ai pas essayé sa solution, alors dites-nous si cela fonctionne et comment.

1
enguerran

J'ai découvert qu'il y a une autre approche pour le faire. Fonctionne parfaitement dans Opera New, FF, Chrome et Safari. Malheureusement, cela ne fonctionne pas parfaitement dans IE (mais assez bien pour mon cas).

L'idée est d'encapsuler un élément input=file avec un div de taille fixe et un débordement masqué, puis de définir cursor: pointer;. Ensuite, nous déplaçons le bouton en dehors de la div en utilisant le remplissage à gauche.

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

et styles d'échantillon

.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;
}

Ici vous pouvez trouver des exemples en direct: http://jsfiddle.net/5c5RH/2/

1
pawelkmpt

Essayez d'utiliser:

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

Voyez si cela fonctionne. J'ai dû mettre le pointeur + la main dans le mien pour le faire fonctionner dans FF/Chrome/etc. De plus, je ne suis pas sûr que cela compte, mais je ne pense pas qu'il y ait des citations autour de 'fichier' dans le fichier css.

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 {curseur: pointeur;}

Vous pouvez le voir en action ici: http://blueimp.github.com/jQuery-File-Upload/

Ce n'est pas le jQuery le faire. C'est le http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css fichier. Je viens de récupérer ce dont j'avais besoin et cela fonctionne très bien sans aucun problème.

0
Christina

Comment je l'ai fait: 

    /* 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;
}

Et puis sur ma page de vue:

  <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>

Et puis je soumets simplement mon formulaire via AJAX au serveur et gère le reste ici.

Donc, tl; dr -> je relaie le clic du lien visible (avec tous les styles et les cloches et sifflets) et je clique en fait sur l'entrée du fichier. :)

J'espère que ça aide quelqu'un.

0
Martin

Basé sur https://stackoverflow.com/a/3030174/2325676 - Masquer l'entrée en utilisant l'opacité 0. 

La clé pour que le curseur fonctionne sur toute la zone est de définir le font-size sur une valeur supérieure à la hauteur du bouton, de sorte que le bouton de saisie du fichier soit enfoncé sous la zone visible et que le survol de la souris se trouve sur la partie texte du fichier contribution:

<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
Daniel Flippance