Le style CSS sur l'Entrée de type de Fichier
Je suis le style d'une Entrée de type de Fichier en utilisant uniquement CSS, et il fonctionne sur tous les navigateurs attendre Firefox 11.0.
CSS:
label{
background:url(http://www.itilexamapp.com/images/upload.png) no-repeat 0 0;
padding:5px;
display:inline-block;
}
input[type="file"]
{ -moz-opacity:0;
-webkit-opacity:0;
filter:alpha(opacity=0);
padding:6px;
width:200px;
}
HTML:
<label>
<input type="file" name="file_upload" />
</label>
Vous pouvez voir le code de travail ici:
http://jsfiddle.net/kheema/PeXq9/7/
S'il vous plaît, ne pas jamais comme ça. Pour une chose, vous ne pouvez pas supposer que tous les navigateurs ne l'aime que. Comment votre code avec les anciens navigateurs comme IE8? Comment ça va fonctionner avec les navigateurs mobiles? Comment ça va fonctionner avec les navigateurs que vous ne connaissez pas?
double possible de Style <input type="file">
Par ailleurs, il existe dans beaucoup de doublons. Beaucoup, beaucoup.
Je voudrais aussi éviter de style à tous. Aussi, vous savez le champ de texte n'est pas renseigné avec le nom de fichier (ce qui est normalement), droit? Alors pourquoi même l'avoir dans l'image?
Je suis tout à fait d'accord avec Chris commentaires. Il faut que je pense à propos de linux, navigateur et d'envisager le navigateur opera. Je pense que le bon et solution acceptable est que je doit utiliser uniform.js bibliothèque jquery pour fonctionner dans tous les navigateurs.
double possible de Style <input type="file">
Par ailleurs, il existe dans beaucoup de doublons. Beaucoup, beaucoup.
Je voudrais aussi éviter de style à tous. Aussi, vous savez le champ de texte n'est pas renseigné avec le nom de fichier (ce qui est normalement), droit? Alors pourquoi même l'avoir dans l'image?
Je suis tout à fait d'accord avec Chris commentaires. Il faut que je pense à propos de linux, navigateur et d'envisager le navigateur opera. Je pense que le bon et solution acceptable est que je doit utiliser uniform.js bibliothèque jquery pour fonctionner dans tous les navigateurs.
OriginalL'auteur Kheema Pandey | 2012-04-04
Vous devez vous connecter pour publier un commentaire.
Voici la solution, ajouter à vos styles. :
Je pense que Firefox 11 a cessé de divertir certains de le vendeur préfixes (-moz-opacity ici) maintenant.
merci pour votre aide TEA_Totaler 🙂
OriginalL'auteur anuj_io
En option, vous pouvez simplifier avec:
Et le CSS:
Bien sûr, vous auriez besoin de les accueillir pour la prise en charge du navigateur.
OriginalL'auteur