Custom Select

Custom select form element.

How to

The custom select control is a snippet used to override the native select appearance and replace it with a custom control. The menu it triggers is the native one.

Use the --custom-dropdown variation if you want to replace the native menu with a custom dropdown. You can use the data-trigger-class attribute added to the .js-select element to apply custom classes to the select control. 

The vertical gap between the custom dropdown and the custom control is set using the --select-vertical-gap CSS custom property (deafult value is 4px).

The custom dropdown variation is viewport aware: its position, relative to the trigger element, is automatically updated based on the available space.

When the custom dropdown is open, the aria-expanded attribute of the custom control element is set to true.

.select__button[aria-expanded="true"] { 
  // custom select control if dropdown = visible
}

If you need to reset the appearance of the --custom-dropdown element after the native <select> has been updated by an external control (e.g., a form reset), use the select-updated custom event to trigger the update:

var customSelect = document.getElementsByClassName('js-select')[0];
var customEvent = new CustomEvent('select-updated');
// update the custom dropdown appearance to match the <select> element
customSelect[0].dispatchEvent(customEvent); 

Categories

• Forms > Form Elements

Bug report & feedback

Component Github page ↗