Le curseur:pointeur de la propriété ne s'applique pas à l'upload de fichier de boutons dans les navigateurs Webkit

j'ai le code CSS qui ne fonctionne pas vraiment sur webkit navigateurs tels que safari et chrome

si vous voulez vivre exemple ici, il est http://jsfiddle.net/mnjKX/1/

j'ai ce code CSS

.file-wrapper {
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    position: relative;
}
.file-wrapper input {
    cursor: pointer;
    font-size: 100px;
    height: 100%;
    filter: alpha(opacity=1);
    -moz-opacity: 0.01;
    opacity: 0.01;
    position: absolute;
    right: 0;
    top: 0;
}
.file-wrapper .button {
    background: #79130e;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    margin-right: 5px;
    padding: 4px 18px;
    text-transform: uppercase;
}

et ce code HTML :

<span class="file-wrapper">
   <input type="file" name="photo" id="photo" />
   <span class="button">Choose a Photo</span>
</span>

ce code montre caché fichier d'entrée de la balise ,
le problème ici est que le curseur:pointeur ne fonctionne pas sur les navigateurs webkit ,

comment puis-je le résoudre ou contourner /dépasser cela ?

cursor:pointer travaille très bien ici.
Pas pour moi. J'ai regardé le violon sur Chrome 14 et pas de pointeur curseur est indiqué nulle part.
Il semble que Chrome ne s'applique pas à la cursor:pointer règle de <input type="file"> éléments: jsfiddle.net/mnjKX/8
Il fonctionne dans Chrome
Vidas — Il fait, mais la valeur par défaut n'est pas inherit de sorte que vous avez le style le pointeur pour l'entrée explicitement ... mais ensuite, il s'applique uniquement dans le champ de texte de la partie et de ne pas le bouton de la partie.
Je suppose que j'ai une fracture de Chrome construire, puis.
Fonctionne pour moi en Chrome 14
Chrome 14.0.835 (Win) ne fonctionne pas.
Le cursor propriété n'héritent par défaut, c'est juste qu'il est incapable d'hériter de tout le chemin vers le bouton à l'intérieur de la <input type="file"> élément. Ce bouton est inaccessible et sa présentation ne peut pas être défini avec les CSS.
Vidas — j'ai édité votre JS Fiddle. Avec le code que vous avez écrit, en pointant sur le champ de texte de la partie de l'entrée affiche le curseur par défaut, si je le modifier de sorte qu'il établit cursor: pointer sur l'entrée, puis il montre le pointeur du curseur.
Qui edition est-il?
Vidas — Pas un seul que j'ai sauvé. J'ai collé cursor: pointer dans un ensemble de règles avec un sélecteur qui correspondait à l'entrée.
Je crois que j'ai compris. Le cursor bien, en effet, est hérité, mais les navigateurs aient préséance sur les contrôles de formulaire. Voir ici: jsfiddle.net/mnjKX/20

Par exemple, le Chrome est l'agent utilisateur feuille de style définit une règle avec le sélecteur input[type="button"], input[type="submit"], input[type="reset"], input[type="file"] ::-webkit-file-upload-button, button pour qui la cursor propriété est définie à default (en ignorant l'héritage pointer valeur)

InformationsquelleAutor some Folk | 2011-09-26

css cursor html webkit

68

Pour commencer, il fonctionne dans Chrome si vous supprimez le height déclaration de la input règle.

Démo Live: http://jsfiddle.net/mnjKX/16/

Mais ce transparent champ de saisie est un enfer d'un hack... je ne voudrais pas compter sur elle.

Mise à jour:

Et ici est la bonne solution:

::-webkit-file-upload-button { cursor:pointer; }

Je pensais que l'upload de fichier bouton est inaccessible, mais Chrome de l'utilisateur de l'agent de la feuille de style prouvé mon mal :)

wow ça fonctionne très bien ! merci , mais ce que tu veux dire pour commencer?

C'est juste trop hackish. Je ne vois pas ma réponse comme une solution complète.

J'ai trouvé la bonne solution...

Très agréable, vous pouvez également inverser le bouton avec -webkit-rtl-commande: à gauche;

Vous ne pouvez pas atteindre le bouton dans d'autres navigateurs. Donc la bonne solution, en fait, n'est pas bonne suffisant. +1 pour le hackish solution si. C'est probablement le meilleur hack de là-bas.

La question adressée spécifiquement les navigateurs Webkit. Je n'ai pas de chercher des solutions pour les autres navigateurs. Il se pourrait qu'il existe des solutions similaires pour les autres navigateurs.

Cool ::-webkit-file-upload-bouton { curseur:pointeur; } résolu mon problème

Oh mon dieu, c'est incroyable, vous avez trouvé que le sélecteur. Merci!!!!

j'ai enfin trouvé la solution, merci beaucoup, vraiment, que je suis heureux

InformationsquelleAutor Šime Vidas

15

Intéressant (cross-browser) solution je suis venu avec:

Donner à l'entrée d'une propriété CSS de curseur:pointeur, placer l'entrée dans un div (avec overflow:hidden) et de donner à l'entrée gauche de remplissage de 100%. La zone rembourrée aura le pointeur de la propriété.

Je n'ai personnellement pas confiance -webkit et -moz correctifs parce que je me sens comme ils sont arbitraires et temporaire, et sera bientôt remplacée.

Très belle solution. J'ai justement mon entrée enveloppé dans sa propre forme, de sorte que cela fonctionne comme un charme, pas de supplément div nécessaire 🙂

intelligent. je suis toujours super paranoïaque à propos de nuances comme ce changement soudain sans raison

merci ! c'est un excellent travail !

L'amour ce hack, fait-il si facile d'obtenir le pointeur du curseur de travail 😀

InformationsquelleAutor Mohammed Ibrahim

Vous devez vous connecter pour publier un commentaire.