Personnaliser la balise select avec CSS

juin 30, 2019décembre 30, 2020 Amine KOUIS Aucun commentaire css liste déroulante select, menu déroulant css

Si vous essayez de styliser la balise select directement en utilisant les propriétés CSS comme « background » ou « border », cela ne fonctionnera pas, car la plupart des éléments de formulaire sont natifs aux navigateurs et n’acceptent pas tant de styles visuels. Nous devons donc trouver un autre moyen de styliser la balise select.

Dans ce tutoriel vous allez découvrir comment personnaliser la balise select avec CSS. Il suffit de copier/coller le code HTML/CSS suivant :

Code HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Personnaliser la balise select avec CSS</title>
	</head>
	<body>
		<div class="select-style">
		  <select>
			<option value="javascript">JavaScript</option>
			<option value="html">HTML</option>
			<option value="css">CSS</option>
			<option value="php">PHP</option>
		  </select>
		</div>
	</body>
</html>

Code CSS:

.select-style {
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    width: 120px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff;
    background: #fff;
    position: relative;
}

.select-style select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.select-style:after {
    top: 50%;
    left: 85%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #000000;
    border-width: 5px;
    margin-top: -2px;
    z-index: 100;
}

.select-style select:focus {
    outline: none;
}

Résultat

QCMs qui pourraient vous intéresser :

Code HTML:

Code CSS:

Vous pourrez aussi aimer

Comment supprimer l’espace entre les cellules d’une colonne d’un tableau en CSS

Comment définir la hauteur d’une DIV à 100% avec CSS

Comment empêcher le redimensionnement d’un textarea en CSS

Laisser un commentaire Annuler la réponse