Hello Everyone,
I found the following tutorial which is what I was looking for.
https://www.w3schools.com/howto/howto_custom_select.asp
However it does not work with keyboard inputs. I am trying to update the javascript of this tutorial so it works like a native select. What I'm trying to do is:
If custom select is focused, pressing spacebar or enter drops down the options list
Pressing the up or down arrow keys, navigates/highlights previous or next option
Pressing enter on highlighted option, updates and closes native and custom select
Pressing escape, closes native and custom select
I've managed to get point number 4 (Pressing Esc closes all select boxes) by updating the last part of the javascript as follows.
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
document.onkeydown = function(e) {
e = e || window.event;
if ((e.keyCode == 27) || (e.which == 27)) {
closeAllSelect();
}
};
However I cannot get points 1, 2 and 3 to work. Any help figuring it out or better yet suggest a script update, would be greatly appreciated.
Thanks in advance.