CODEWITHSUNDEEP
htmlcssselectize.js
Aqeel Gillani
Aqeel Gillani

Reputation: 11

Adding an arrow and a reset icon to reset a dropdown using Selectize.js

<select class='select-option hid-model search ' id="modelsmain" onchange="filteronchange('indexmain')" name="models">
  <option value=''><?php echo lang('Model'); ?></option>
</select>

In this code, I am using Selectize.js for the dropdown. I want to add an arrow after the first option and when I click on the arrow, it should open the dropdown and the arrow should be replaced by a cross icon to reset the selected options.

The CSS code used for adding the arrow (my current approach):

.selectize-control.single .selectize-input::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    margin-left: 10px;
    margin-right: 5px;
    float: right;
}

Upvotes: 1

Views: 60

Answers (0)

Related Questions