Search code examples
htmlcssscrollalignment

Align selected item in scrolling html dropdown


I have a scrolling dropdown, and when someone opens the dropdown, I want the currently selected element to show in the center (if possible, aka it's low/high enough), instead of the browser default - in Firefox, the dropdown view shows the selected element at the end.

undesired desired


Solution

  • Unfortunately, you can't do that with your default select options.

    This question is already answered here.

    Anyway, you could build a custom select or could use plugin for custom select and then position the dropdown:

    https://select2.org/

    http://gregfranko.com/jquery.selectBoxIt.js/