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