Changer le type de curseur sur le type d’entrée = “fichier”

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

J’ai essayé ce qui suit:

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

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

J’ai fait une solution avec jquery ici: http://jsfiddle.net/gKVKm/36/

Regardez ici pour voir ce qui se passe:

Cela fonctionne pour moi dans Opera, Safari, IE, Chrome et Firefox.

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 supporte pas de spécifier le type dans le style.

Comment ça marche dans les différents navigateurs

IE7 +

Fonctionne parfaitement.

FireFox

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

Chrome et Safari (comportement identique)

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

Opéra

Fonctionne parfaitement.


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

cursor:pointer ne fonctionne pas sur le fichier d’entrée à cause du bouton par défaut. Aucune raison particulière ici. Vous devez supprimer son apparence via ce code, faites attention à font-size:0 .

 input[type='file']{ opacity: 0; cursor: pointer; width: 24px; height: 24px; font-size: 0; position: absolute; } 
   

Sachez cela un vieux fil. Mais les résultats de Google amènent cela … Je viens de trouver une solution partielle à chrome (pas d’invalidation flash, javascript, manipulation de DOM supplémentaire avec débordement caché)

  • Firefox a corrigé ce bug
  • safari (7 en ce moment) et chrome n’ont pas le même comportement
  • safari (7, mac) ne fonctionne pas du tout pour moi
  • chrome (et peut-être l’opéra maintenant quand il 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 le bouton n’hérite pas de la propriété du curseur en général (?) Mais du rest de la dose du champ d’entrée [type = fichier]. Thats pourquoi chrome obtenir le pointeur sauf le bouton

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

Il semble bien faire 🙂

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

Voie simple et comment cela fonctionne dans tous les navigateurs:

HTML:

   

JQuery:

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

Ensuite, vous pouvez appuyer sur n’importe quel bouton pour télécharger le fichier et vous avez un curseur de pointeur.


Dans Chrome et Opera, le curseur devient un pointeur sur le remplissage uniquement et if display:block; , c’est pourquoi, pour ces navigateurs, vous devez le faire:

  

J’ai fait ce qui suit:

 
  • file
  • 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 “pointeur” sur l’ensemble de l’entrée, à l’exception du bouton. Dans la plupart des navigateurs, le bouton est sur le côté gauche ou sur le côté droit. D’accord! Permet de donner une grande largeur à l’entrée et d’afficher uniquement le milieu … Le bouton sera masqué. Et cliquable, c’est toute l’entrée.

    Ça marche pour moi.

    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 de clic sur une entrée de fichier totalement invisible. Vous pouvez masquer les entrées de fichiers comme vous le souhaitez, sauf à définir la propriété display sur none. Réglage {height: 0; overflow: hidden} sur le formulaire parent fera l’affaire. J’utilise des formulaires distincts pour chaque téléchargeur.

    Rediriger votre événement de clic de bouton personnalisé en entrée de fichier caché et vous avez terminé.

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

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

    Deuxièmement, le standard W3C Css ne permet pas de styliser des tags complexes comme . 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.

    J’ai découvert qu’il y avait une autre approche pour y arriver. 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’envelopper l’élément input=file avec la taille fixe div et le débordement caché et de définir le cursor: pointer; . Nous déplaçons alors le bouton en dehors du div en utilisant le remplissage gauche.

     

    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 un exemple en direct: http://jsfiddle.net/5c5RH/2/

    Chrome me donnait aussi ce problème. J’ai essayé de définir toutes sortes de sélecteurs CSS, mais rien ne semblait fonctionner correctement. 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 plage et placez-la sous l’entrée dans le formulaire. Ce sera votre label.
    4. Utilisez CSS pour définir la hauteur de l’entrée à 0px et l’opacité à 0, cela le rendra invisible.
    5. rendre la travée positionnée absolument et à gauche 0px.
      
    My File label!!!!

    Je l’ai testé dans Chrome et FF, pas avec, mais j’espère que cela aide. jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/

    Essayez d’utiliser:

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

    Voir si cela fonctionne. J’ai dû mettre le pointeur + main dans le mien pour le faire fonctionner dans FF / Chrome / etc. De plus, je ne suis pas sûr que cela ait de l’importance mais je ne pense pas qu’il y ait des citations autour de «fichier» dans le CSS.

        Select Image   

    css:

    .btn {curseur: pointeur;}

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

    Ce n’est pas le jquery qui le fait. C’est le fichier http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css . Je viens de saisir ce dont j’avais besoin et ça marche très bien sans la moindre question.

    Basé sur https://stackoverflow.com/a/3030174/2325676 – Cacher l’entrée en utilisant l’opacité 0.

    La clé pour faire fonctionner le curseur sur toute la zone est de définir la font-size la font-size sur une valeur supérieure à la hauteur du bouton pour que le bouton d’entrée du fichier soit placé sous la zone visible et que le survol de la souris l’entrée du fichier:

      

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

      

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

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

    J’espère que cela aide quelqu’un.