A custom dropdown, with full functionalities, to customise your webpage
This component was created using only HTML, SCSS and Vanilla JS.
It's a component that you can use in place of select element, since they are not very customisable.
It's made out of a div wrapper and 2 children: a span and a ul. So its markup it's very simple.
The style I chose is inspired to neumorphism.
🔗 Live preview: here
🔗 GitHub repo: here
The custom select has all the functionalities a normal select has:
- It can get focused with mouse or keyboard (TAB)
- It opens/close on click
- It closes if you click out of it
- It's keyboard responsive, in fact once you get focus on it:
- You can use space to open/close the dropdown
- You can use Arrow Up or Down to move through the options
- You can use Escape or Enter to select and exit the select
- It comes with a search function built in: just start type the option and you'll be redirected to the one matching your query.
- HTML
- SCSS
- JavaScript
- VS Code + ESLint
- Git & GitHub
- Learned how to hard code functionalities already built in HTML elements
- Learned to style and code components
- Discovered interesting properties (scrollIntoView, etc...)
- Deepened debouncing pattern
- Learned how to code a basic search function
- Modularity, to let it be installed and used through npm
🗿 buondevid --> GitHub