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 redimensionner une image en background avec CSS

Comment créer deux div côte à côte de la même hauteur en CSS

Comment créer un curseur personnalisé avec CSS

Laisser un commentaire Annuler la réponse