Custom select form element.
All components are based on CodyFrame.
This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.
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.
// 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');
var customEvent = new CustomEvent('select-updated');
// update the custom dropdown appearance to match the <select> element