Custom Select Box & Tag
Here is some custom styled select fields using choice.js
Use
multiple attribute to enable mutiple select on your select || .js-select option, data-search="false" to disable search option in select dropdown. Use
data-cross="false" attribute to input to hide cross icon. Use
disabled attribute to select and tag input for disabled state. <div class="form-group"> <label class="form-label">Single select input</label> <div class="form-control-wrap"> <select class="js-select" data-search="true" data-sort="false"> <option value="">Select Payment Method</option> <option value="1">PayPal</option> <option value="2">Bank Transfer</option> <option value="3">Skrill</option> <option value="4">Moneygram</option> </select> </div></div><div class="form-group"> <label class="form-label">Tag (with cross)</label> <div class="form-control-wrap"> <input class="js-tags" value="Tag1,Tag2" type="text" placeholder="Enter something"> </div></div>Example
Use
multiple or disabled attribute to select to enable multiple, disabled state. <div class="form-group"> <label for="exampleFormSelect1" class="form-label">Default Select</label> <div class="form-control-wrap"> <select class="form-select" id="exampleFormSelect1" aria-label="Default select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div></div><div class="form-group"> <label for="exampleFormSelectMultiple" class="form-label">Multiple Select</label> <div class="form-control-wrap"> <select class="form-select" id="exampleFormSelectMultiple" multiple aria-label="multiple select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div></div>Sizing
Set heights using classes like .form-select-lg and .form-select-sm on .form-control for large and small size
<div class="form-control-wrap"> <select class="form-select" <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select></div>
