Select
eCommerce select
Select components dedicated to building eCommerce projects.
Regular select
<div class="d-flex flex-wrap">
<div class="select-outline position-relative w-100">
<select class="mdb-select md-form md-outline">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Example label</label>
</div>
</div>
$(document).ready(function () {
$('.mdb-select').materialSelect();
$('.select-wrapper.md-form.md-outline input.select-dropdown').bind('focus blur', function () {
$(this).closest('.select-outline').find('label').toggleClass('active');
$(this).closest('.select-outline').find('.caret').toggleClass('active');
});
});
Multi-select
<div class="d-flex flex-wrap">
<div class="select-outline position-relative w-100">
<select class="mdb-select md-outline md-form" multiple searchable="Search here..">
<option value="" disabled selected>Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="4">Poland</option>
<option value="5">Japan</option>
</select>
<label>Label example</label>
<button class="btn-save btn btn-primary btn-sm mt-2">Save</button>
</div>
</div>
$(document).ready(function () {
$('.mdb-select').materialSelect();
$('.select-wrapper.md-form.md-outline input.select-dropdown').bind('focus blur', function () {
$(this).closest('.select-outline').find('label').toggleClass('active');
$(this).closest('.select-outline').find('.caret').toggleClass('active');
});
});
Disabled
<div class="d-flex flex-wrap">
<div class="select-outline position-relative w-100">
<select class="mdb-select md-form md-outline" disabled>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label class="disabled">Example label</label>
</div>
</div>
$(document).ready(function () {
$('.mdb-select').materialSelect();
$('.select-wrapper.md-form.md-outline input.select-dropdown').bind('focus blur', function () {
$(this).closest('.select-outline').find('label').toggleClass('active');
$(this).closest('.select-outline').find('.caret').toggleClass('active');
});
});
Searchable
<div class="d-flex flex-wrap">
<div class="select-outline position-relative w-100">
<select class="mdb-select md-form md-outline" searchable="Search here..">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Example label</label>
</div>
</div>
$(document).ready(function () {
$('.mdb-select').materialSelect();
$('.select-wrapper.md-form.md-outline input.select-dropdown').bind('focus blur', function () {
$(this).closest('.select-outline').find('label').toggleClass('active');
$(this).closest('.select-outline').find('.caret').toggleClass('active');
});
});
Questions or feedback?
Let us know