Ecco alcuni modi per modellare <option>
insieme a <select>
se stai usando Bootstrap e / o jquery. Capisco che questo non è ciò che il poster originale sta chiedendo, ma ho pensato di poter aiutare gli altri che si imbattono in questa domanda.
Puoi comunque raggiungere l'obiettivo di acconciarli <option>
separatamente, ma potrebbe essere necessario applicare anche un certo stile <select>
. La mia preferita è la libreria "Bootstrap Select" menzionata di seguito.
Bootstrap Select Library (jquery)
Se stai già utilizzando bootstrap, puoi provare la libreria Select Bootstrap o la libreria in basso (poiché ha un tema bootstrap).
Si noti che è possibile modellare l'intero select
elemento o gli option
elementi separatamente.
Esempi :
Dipendenze : richiede jQuery v1.9.1 +, Bootstrap , il componente dropdown.js di Bootstrap e il CSS di Bootstrap
Compatibilità : incerto, ma bootstrap afferma che "supporta le versioni più recenti e stabili di tutti i principali browser e piattaforme"
Demo : 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)
C'è una libreria che puoi usare chiamata Select2 .
Dipendenze : la libreria è solo JS + CSS + HTML (non richiede JQuery).
Compatibilità : IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+
Demo : https://select2.org/getting-started/basic-usage
C'è anche un tema bootstrap disponibile.
Nessun esempio 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>
Esempio Bootstrap:
$(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)
Se hai soldi extra, puoi utilizzare una libreria premium MDBootstrap . (Questo è un intero kit UI , quindi non è leggero)
Ciò consente di modellare gli elementi di selezione e opzione utilizzando il design Materiale .
Esiste una versione gratuita, ma non ti consentirà di utilizzare il grazioso design Material!
Dipendenze : Bootstrap 4 , JQuery,
Compatibilità : "supporta le versioni più recenti e stabili di tutti i principali browser e piattaforme".
Demo : https://mdbootstrap.com/docs/jquery/forms/select/#color