Changer le bouton parcourir d’un input de type file avec CSS

Créer un input de type file élégante qui correspond au reste du formulaire. Comme le checkbox, l’input de type file de HTML5 ne répond pas à de nombreux styles personnalisés et rares qui fonctionnent souvent derrière des préfixe et ne se comportent pas de manière uniforme sur tous les navigateurs. l’exemple suivant vous montre comment changer le bouton parcourir d’un input de type file.
 
 

Code HTML:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Changer le bouton parcourir</title>
    <style>
      /* Mettez le code css ici */
    </style>
	</head>
	<body>
		<div class="parent-div">
		  <button class="btn-upload">Choisir le fichier</button>
		  <input type="file" name="upfile" />
		</div>
	</body>
</html>

 

Code CSS:
.parent-div {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.parent-div input[type=file] {
  left: 0;
  top: 0;
  opacity: 0;
  position: absolute;
  font-size: 90px;
}

.btn-upload {
  background-color: #fff;
  border: 3px solid #000;
  color: #000;
  padding: 10px 25px;
  border-radius: 10px;
  font-size: 22px;
  font-weight: bold;
}
Résultat

 
 

Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *