Bonjour,
J'ai un problème. J'aimerais remplacer le bouton gris input type=file par une image. Je n'ai pas vraiment trouvé de tutoriel donc je viens poser ma question ici. J'ai testé ça mais ça me mais le "choisissez un fichier" gris au dessus de l'image.
Merci de votre aide.

<style>
.bouton2
{
background:url(images/bouton-parcourir.png);
border:none;
background-repeat: no-repeat;
width: 155px; /* largeur à spécifier */
height: 52px; /* longueur à spécifier */
cursor: pointer;
}
 </style>
<input type="file" class="bouton2" name="fichier" size="30">

Cordialement.

salut,


ce n'est pas possible.

il existe une mascarade qui consiste à rendre le champs file invisible et d'ajouter un champs input et un image au même endroit.
tu joue sur le z-index pour que l'input file soit sur le dessus (mais transparent).
lorsque tu pense cliquer sur l'image tu clique en fait sur l'input file.

par contre coté accessibilité c'est zéro.

@+

Donc il vaut mieux que je laisse le input=file normal c'est ça?

Oui

Bonjour,

Essayez ceci, mais tu dois remplacer le nom de l'image que tuveux inserer!


<div class="fileUpload">
<span class="custom-span"> <img src="bouton.jpg" height="100" width="100" >
</span>
<p class="custom-para">Ajouter une photo</p>
<input id="uploadBtn" type="file" class="upload" />
</div>
<input id="uploadFile" placeholder="0 files selected" disabled="disabled" />

<script type="text/javascript">
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
</script>

CSS CODE:

.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
background-color: #BDBDBD;
height: 100px;
width: 100px;
text-align: center;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
height: 100%;
text-align: center;
}
.custom-span{ font-family: Arial; font-weight: bold;font-size: 100px; color: #FE57A1}
#uploadFile{border: none;margin-left: 10px; width: 200px;}
.custom-para{font-family: arial;font-weight: bold;font-size: 24px; color:#585858;}