Skip to content

jQuery dropdownlist styling

Maikel Bos edited this page Feb 20, 2020 · 3 revisions

The dropdownlist only provides very basic styling in the provided style sheet jquery-dropdownlist.style.css; you can use this as a template to create your own style. The various css classes the dropdownlist uses are:

  • .dropdownlist is the main container for the dropdown
  • .dropdownlist-selector is the selector element that is clicked to expand the dropdown
  • .dropdownlist-selector-text is where the selected item text is displayed
  • .dropdownlist-selector-toggle is the toggle arrow in the default style
  • .dropdownlist-search is the search/autocomplete input
  • .dropdownlist-list is the list that gets displayed/hidden and includes the original element
  • .dropdownlist-list-up is applied to the dropdownlist when it opens upwards instead of downwards in dynamic mode
  • .dropdownlist-field are the input fields; checkboxes are displayed in multiselect
Clone this wiki locally