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

juillet 4, 2019février 10, 2020 Amine KOUIS Aucun commentaire

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

QCMs qui pourraient vous intéresser :

Code HTML:

Code CSS:

Vous pourrez aussi aimer

Comment superposer une div sur une autre div avec CSS

Comment aligner le texte verticalement au centre d’une DIV avec CSS

Personnaliser la balise select avec CSS

Laisser un commentaire Annuler la réponse