Voici quelques façons de <option>
styliser avec <select>
si vous utilisez Bootstrap et / ou jquery. Je comprends que ce n'est pas ce que l'affiche originale demande, mais j'ai pensé que je pourrais aider les autres qui tombent sur cette question.
Vous pouvez toujours atteindre l'objectif de styliser chacun <option>
séparément, mais vous devrez peut-être également appliquer un certain style à <select>
. Mon préféré est la bibliothèque "Bootstrap Select" mentionnée ci-dessous.
Bibliothèque Bootstrap Select (jquery)
Si vous utilisez déjà le bootstrap, vous pouvez essayer la bibliothèque Bootstrap Select ou la bibliothèque ci-dessous (car elle a un thème bootstrap).
Notez que vous pouvez styliser l' select
élément entier ou les option
éléments séparément.
Exemples :
Dépendances : nécessite jQuery v1.9.1 +, Bootstrap , le composant dropdown.js de Bootstrap et le CSS de Bootstrap
Compatibilité : incertain, mais bootstrap dit qu'il "prend en charge les dernières versions stables de tous les principaux navigateurs et plates-formes"
Démo : https://developer.snapappointments.com/bootstrap-select/examples/
.special {
font-weight: bold !important;
color: #fff !important;
background: #bc0000 !important;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
<select class="selectpicker">
<option>Mustard</option>
<option class="special">Ketchup</option>
<option style="background: #5cb85c; color: #fff;">Relish</option>
</select>
Select2 (JS lib)
Il existe une bibliothèque que vous pouvez utiliser appelée Select2 .
Dépendances : la bibliothèque est JS + CSS + HTML uniquement (ne nécessite pas JQuery).
Compatibilité : IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+
Démo : https://select2.org/getting-started/basic-usage
Il y a aussi un thème bootstrap .
Aucun exemple Bootstrap:
$(function() {
var $select = $('.select2');
$select.select2({
theme: 'paper'
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
<select class="select2 form-control" placeholder="Country">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
Exemple d'amorçage:
$(function() {
var $select = $('.select2');
$select.select2({
theme: 'paper'
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/paper/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
<select class="select2 form-control" placeholder="Country">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
MDBootstrap ($ & Bootstrap & JQuery)
Si vous avez de l'argent supplémentaire, vous pouvez utiliser une bibliothèque premium MDBootstrap . (Ceci est un kit d'interface utilisateur complet , donc ce n'est pas léger)
Cela vous permet de styliser vos éléments de sélection et d'option à l'aide de la conception Matériau .
Il existe une version gratuite, mais elle ne vous permettra pas d'utiliser le joli design Material!
Dépendances : Bootstrap 4 , JQuery,
Compatibilité : "prend en charge les dernières versions stables de tous les principaux navigateurs et plates-formes."
Démo : https://mdbootstrap.com/docs/jquery/forms/select/#color