Standart Select

Custom Select

Please select
This is a required field.
Please select
Please select
  • Please select
  • option 1
  • option 2
  • option 3
Please select
  • Lorem ipsum dolor sit amet, consectetur adipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingv elit. Dolore ex fuga hic incidunt nesciunt possimus quod sed sint velit voluptatibus. Ab at eaque eligendi excepturi facilis molestiae, porro praesentium ut. Aliquam autem beatae dicta id minima quae quam? Accusamus ad inventore minima molestias nam necessitatibus nesciunt nobis quidem sequi ut?
  • option 2
  • option 3
Please select
  • Lorem ipsum dolor sit amet, consectetur adipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingadipisicingv elit. Dolore ex fuga hic incidunt nesciunt possimus quod sed sint velit voluptatibus. Ab at eaque eligendi excepturi facilis molestiae, porro praesentium ut. Aliquam autem beatae dicta id minima quae quam? Accusamus ad inventore minima molestias nam necessitatibus nesciunt nobis quidem sequi ut?
  • option 2
  • option 3
  • Lorem ipsum siseus
  • option 3

Source code

Custom select

<div class="field"> <label class="label" for="select-choice">Select Dropdown Choice:</label> <select required="true" class="amtheme-select" name="select-choice" id="select-choice" tabindex="-1"> <option value="">Please select</option> <option value="1">Choice 1</option> <option value="2">Choice 2</option> <option value="3">Choice 3</option> </select> <div class="amtheme-select-block" data-mage-init='{"amSelect": {"selectId": "select-choice"}}' data-amselect-js="select"> <span role="button" tabindex="0" class="amtheme-placeholder" data-amselect-js="placeholder"> <span class="amtheme-content" data-amselect-js="placeholder-content"> Please select </span> </span> <ul role="list" class="amtheme-select-options" data-amselect-js="options"> <li class="amtheme-option" tabindex="0" data-amselect-js="item"> Please select </li> <li class="amtheme-option" tabindex="0" data-amselect-js="item" data-amselect-value="1"> <span class="amtheme-title">option 1</span> </li> <li class="amtheme-option" tabindex="0" data-amselect-js="item" data-amselect-value="2"> <span class="amtheme-title">option 2</span> </li> <li class="amtheme-option" tabindex="0" data-amselect-js="item" data-amselect-value="3"> <span class="amtheme-title">option 3</span> </li> </ul> </div> </div>

Custom multiselect

<div class="field"> <label class="label" for="multiselect-choice">Multiselect Dropdown Choice:</label> <select required="true" class="amtheme-select" name="multiselect-choice" id="multiselect-choice" multiple="multiple" tabindex="-1"> <option value="choice-1">Choice 1</option> <option value="choice-2">Choice 2</option> <option value="choice-3">Choice 3</option> </select> <div class="amtheme-select-block" data-mage-init='{"amSelect": {"selectId": "multiselect-choice", "selectType": "multiple"}}' data-amselect-js="select"> <span role="button" tabindex="0" class="amtheme-placeholder" data-amselect-js="placeholder"> <span class="amtheme-content" data-amselect-js="placeholder-content"> Please select </span> </span> <ul role="list" class="amtheme-select-options" data-amselect-js="options"> <li class="amtheme-option" tabindex="0" data-amselect-js="item" data-amselect-value="choice-1"> <span class="amtheme-title">Lorem ipsum dolorequi ut?</span> </li> <li class="amtheme-option" tabindex="0" data-amselect-js="item" data-amselect-value="choice-2"> <span class="amtheme-title">option 2</span> </li> <li class="amtheme-option" tabindex="0" data-amselect-js="item" data-amselect-value="choice-3"> <span class="amtheme-title">option 3</span> </li> </ul> </div> </div>