Moi et un gars du travail travaillons sur une application web pour que nos clients puissent se connecter et gérer leurs détails. L'une des sections demande à l'utilisateur de télécharger le logo de sa société, mais comme nous le savons tous, le bouton html browes ou le tag est également connu sous le nom de cookie dur. voilà comment je veux regarder: Styling avec CSS et fonctionnalité du bouton de téléchargement
Mais la réalité est que si je mets une étiquette de vieux fichier là-bas, il aurait l'air fade, générique et hors de propos, donc je googlé pour la solution et après elle de la chasse, je suis tombé sur ce code qui a produit l'image ci-dessous le code (qui je montre aussi le téléchargement de fichier sans l'opacité à zéro):
#divinputfile
{
height:85px;
width:250px;
margin:0px;
background-image: url(images/upload_file.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
#divinputfile #filepc
{
opacity: 0.0;
-moz-opacity: 0.0;
filter: alpha(opacity=00);
font-size:16px;
cursor: pointer;
}
#filepc
{
margin-top: 12px;
}
#fakeinputfile
{
margin-top:-28px;
}
#fakeinputfile #fakefilepc
{
width:250px;
height:22px;
font-size:18px;
font-family:Arial;
}
<body>
<br />
<div id="divinputfile">
<div id="fakeinputfile">
<br />
<input name="fakefilepc" type="text" id="fakefilepc" />
</div>
<div align="right">
<input name="filepc" type="file" size="1" id="filepc" onchange="document.getElementById('fakefilepc').value = this.value;"/>
</div>
</div>
</body>
C'est un hack de base et lorsque je sélectionne le bouton stylé Je sélectionne vraiment le bouton de téléchargement invisible, puis la valeur de l'upl oad est passé dans la boîte de test ci-dessus pour ressembler à sa partie réelle du téléchargement. Deux problèmes avec cette méthode et j'espère que vous serez en mesure de m'aider ici est
a) Seul le bouton peut être cliqué pour télécharger. Dans la plupart des navigateurs (sauf Chrome), vous pouvez cliquer dans la zone de texte ainsi que sur le bouton pour télécharger l'image. Bien sûr avec cette méthode le texte du chemin de fichier est ajouté à la boîte de texte mais toute modification à cette boîte ne changera pas le fichier par exemple: si vous avez sélectionné file1.jpg à télécharger mais que vous vouliez vraiment file2.jpg, changer le chemin du fichier dans la zone de texte ne changera rien à l'élément de téléchargement ACTUAL
b) Certains navigateurs comme Chrome et Opera ajoutent le \ fakepath \ filepath à la zone de texte et c'est juste moche, donc toute instruction if qui peut l'enlever aussi serait extrêmement utile .
J'espère que vous pourrez m'aider avec ceci, si ce n'est pas via des astuces de code, alors si quelqu'un connaît une bonne connexion JavaScript qui sauve la journée.
Merci
Vous pouvez utiliser CSS3.Go à la page: http://w3schools.com/css3/css3_borders.asp et vous voir comment arrondir les coins de vos boutons .. – Rares