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.
Select input

<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>
Tag 

<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.
Select

<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>
multiple Select

<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

form select

<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>
© 2022 Nioboard. Template by Softnio
Recent Notification