Comment Styler un Drop-down <select> de la boîte avec Seul CSS?
Il était difficile depuis longtemps à styler l'élément <select> dans tous les navigateurs.
Pour éviter la faiblesse il avait auparavant, utilisez les moyens différents, par exemple stylez un élément parent, ajoutez des pseudo-éléments, et aussi appliquez JavaScript.
Une collection raisonnable des style, comme il s'est avéré, peut créer une boîte de sélection constante et attirant dans tous les navigateurs, y compris ceux nouveaux.
Il y a quelques élément de la boîte de sélection qui peuvent être stylés, particulièrement les éléments width, height, font, border, color, padding, box-shadow et background color.
Style de Boîte Drop-Down
Voyons un exemple de la boîte de sélection stylée.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.box {
width: 120px;
height: 30px;
border: 1px solid #999;
font-size: 18px;
color: #1c87c9;
background-color: #eee;
border-radius: 5px;
box-shadow: 4px 4px #ccc;
}
</style>
</head>
<body>
<p>Une boîte de sélection ordinaire:</p>
<select>
<option>Café</option>
<option>Thé</option>
<option>Jus</option>
<option selected>Cocktail</option>
</select>
<p>Une boîte de sélection stylée:</p>
<select class="box">
<option>Café</option>
<option>Thé</option>
<option>Jus</option>
<option selected>Cocktail</option>
</select>
</body>
</html>Cependant, la flèche énervante de drop-down reste toujours la même. Il n'y a aucun façon directe de la styler, mais il y a quelques trucs qui peuvent être utilisés pour changer la flèche initiale de drop-down. Discutons les 3 méthodes ci-dessous.
1) Utilisez appearance: none;
Afin de masquer la flèche par défaut de dropdown <select>, définissez la propriété CSS appearance CSS à sa valeur "none", puis ajoutez votre fléche individuelle à l'aide de la propriété raccourcie background.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
select {
width: 140px;
height: 35px;
padding: 5px 35px 5px 5px;
font-size: 18px;
border: 2px solid #ccc;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") 96% / 15% no-repeat #eee;
}
select::-ms-expand {
display: none; /* supprimer la fléche par défaut en IE 10 et 11 */
}
</style>
</head>
<body>
<select>
<option>Café</option>
<option>Thé</option>
<option>Jus</option>
<option selected>Cocktail</option>
</select>
</body>
</html>2) Utilisez overflow: hidden;
Premièrement, placez l'élément de boîte <select> dans un conteneur div avec une largeur fixe et définissez overflow: hidden. Ensuite, donnez à l'élément <select> une largeur qui est supérieure de celle de l'élément <div> de plus que 20 pixels. Cela fait en sorte que la flèche drop-down par défaut devienne masqué (à cause de overflow: hidden sur le conteneur), et maintenant il est possible d'appliquer une image de l'arrière-plan sur le côté droit du <div>.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.mystyle select {
background: transparent;
width: 140px;
height: 35px;
border: 1px solid #ccc;
font-size: 18px;
}
.mystyle {
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") 96% / 20% no-repeat #ddd;
}
</style>
</head>
<body>
<div class="mystyle">
<select>
<option>Café</option>
<option>Thé</option>
<option>Jus</option>
<option selected>Cocktail</option>
</select>
</div>
</body>
</html>3) Utilisez pointer-events: none;
La propriété CSS pointer-events peut être utilisée pour créer des dropdowns <select> inidividuels, en superposant un élément sur la flèche drop-down initiale (pour créer celle personnalisée) et en rejetant pointer-events sur elle.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.mybox {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646e;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 1px 1px 2px #999;
background: #eee;
}
/* Sélectionner les style de la fléche */
.mybox .myarrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") right / 90% no-repeat #eee;
pointer-events: none;
}
</style>
</head>
<body>
<div class="mybox">
<span class="myarrow"></span>
<select>
<option>Café</option>
<option>Thé</option>
<option>Jus</option>
<option selected>Cocktail</option>
</select>
</div>
</body>
</html>4) Utilisez les Signes de Ponctuation Au Lieu de la Flèche Drop-down
Il est assez bien d'utiliser vos signes préférés au lieu du signe drop-down énervant de la boîte <select>.
Définissez les signes dans la propriété content et définissez font correspondante pour une bonne apparence. Ici, nous utilisons "Consolas" et "monospace". Ensuite, vous devez tourner les signes de ponctuation en utilisant la propriété CSS transform.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
select {
width: 140px;
height: 35px;
padding: 4px;
border-radius: 4px;
box-shadow: 2px 2px 8px #999;
background: #eee;
border: none;
outline: none;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
label {
position: relative;
}
label:after {
content: "<>";
font: 11px "Consolas", monospace;
color: #666;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 8px;
top: 2px;
padding: 0 0 2px;
border-bottom: 1px solid #ddd;
position: absolute;
pointer-events: none;
}
label:before {
content: "";
right: 6px;
top: 0px;
width: 20px;
height: 20px;
background: #eee;
position: absolute;
pointer-events: none;
display: block;
}
</style>
</head>
<body>
<label>
<select>
<option>Café</option>
<option>Thé</option>
<option>Jus</option>
<option selected>Cocktail</option>
</select>
</label>
</body>
</html>