Bonjour,
dans ce tutoriel, je vais vous apprendre à styler des champs de formulaires de fichier(input file) en utilisant le (X)html, le CSS et le Javascript.
cette methode est compatible avec tout les navigateurs(ceux testés), et assez simple à comprendre.
Pour commencer, il faut savoir que les champs input file ne sont pas très personnalisables(à part leur taille), dans ce tutoriel, je vais vous montrer une methode simple qui permet d'avoir le résultat recherché.
Bon pour commencer, il y aura le vrai input file et un autre qui est faux et qui sera constitué d'un champ de texte et du bouton parcourir.
Le faux input file sera par-dessous le vrai, et le vrai lui sera transparent(opacité 0).
Le vrai input file ne peut être mis en display:none; ou en visibility:hidden; car il disparaitra et nous nous voulons qu'il soit transparent et que le faux input file serve de "fond".
Finalement, un code javascript sera ajouté et consistera à afficher la valeur du vrai input file dans le champ texte du faux(input file).
j'espère que les explications ont étés claires.
Voici le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Faire un input file stylé en css/html/javascript</title>
<style type="text/css">
.input_file_style_file
{
opacity:0.0;
-moz-opacity:0.0;
-khtml-opacity:0.0;
filter:alpha(opacity=0);
height:23px;
}
.input_file_style_new
{
margin-top:-23px;
}
.input_file_style_new img,.input_file_style_new input
{
vertical-align:middle;
}
.input_file_style_new input
{
border:1px solid #cccccc;
height:16px;
margin:1px;
margin-right:2px;
padding:1px;
}
</style>
</head>
<body>
Voici un champ de sélection de fichier personalisé:
<div class="input_file_style">
<input type="file" size="70" name="file" id="file" class="input_file_style_file" /><br />
<div class="input_file_style_new">
<input type="text" size="70" id="file_new" readonly="readonly" /><img src="bouton.png" alt="Parcourir" />
</div>
</div>
<script type="text/javascript">
//<!--
document.getElementById('file').onchange=function(){
document.getElementById('file_new').value = document.getElementById('file').value;
};
//-->
</script>
</body>
</html>
Essayer
Malheureusement cette technique ne fonctionne pas sur Internet Explorer 6. Mais elle fonctionne sur tout les autres navigateurs
Pour toutes questions ou commentaires, veuillez utiliser le formulaire de contact ou me contacter par MP, vous pouvez aussi utiliser le forum.
merci, j'espère que ce tutoriel vous a plus et vous sera utile.
Scripts et Tutoriels similaires