UI Library

<div class="m-ip-select [modifier class]">
    <div class="m-ip-select__overlay"></div>
    <label class="m-ip-select__label">Country</label>
    <div class="m-ip-select__input">
        <span class="m-ip-select__display is-placeholder">Select</span>
        <select class="m-ip-select__value" name="country" hidden>
            <option value="1">Afghanistan</option>
            <option value="2">Albania</option>
            <option value="3">Algeria</option>
            <option value="4">India</option>
            <option value="5">Indonesia</option>
            <option value="6">United Kingdom</option>
            <option value="7">United States of America</option>
        </select>
    </div>
    <div class="m-ip-select__options-wrapper">
        <ul class="m-ip-select__options">
            <li data-value="1" class="m-ip-select__opt-item">Afghanistan</li>
            <li data-value="2" class="m-ip-select__opt-item">Albania</li>
            <li data-value="3" class="m-ip-select__opt-item">Algeria</li>
            <li data-value="4" class="m-ip-select__opt-item">India</li>
            <li data-value="5" class="m-ip-select__opt-item">Indonesia</li>
            <li data-value="6" class="m-ip-select__opt-item">United Kingdom</li>
            <li data-value="7" class="m-ip-select__opt-item">United States of America</li>
        </ul>
    </div>
</div>