Custom Styled Select Box CSS
HTML
<h4>Select Box CSS</h4>
<select class="templatingSelect2">
<option value=""></option>
<option value="usd">USD</option>
<option value="euro">Euro</option>
<option value="gbp">Pound</option>
</select>
CSS
html, body {
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
display: table-cell;
vertical-align: middle;
}
.templatingSelect2 {
width: 300px;
}
JAVASCRIPT
$(document).ready(function(){
function setCurrency (currency) {
if (!currency.id) { return currency.text; }
var $currency = $('<span class="glyphicon glyphicon-' + currency.element.value + '">' + currency.text + '</span>');
return $currency;
};
$(".templatingSelect2").select2({
placeholder: "What currency do you use?", //placeholder
templateResult: setCurrency,
templateSelection: setCurrency
});
})
