Dropdowns
I have to make a custom dropdown with a custom design, since its almost impossible to style the select and option I would need to make a custom one without using the native select and option tag.
I know there is ::picker and ::picker-icon now but can I already use this and is there a way to have similar result with firefox browsers without having to change much?
6 Replies
Do you have a mockup of what the custom dropdown will look like? Looking at MDN (https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) in both browsers their example at the bottom seems to gracefully degrade. It would probably be best to create a custom element as it could be a couple more years still.
MDN Web Docs
Customizable select elements - Learn web development | MDN
This article explains how to create fully-customized <select> elements using experimental browser features. This includes having full control over styling the select button, drop-down picker, arrow icon, current selection checkmark, and each individual <option> element.
I am using a form then ul then li, a form since it needs to submit data.
Here is an idea for using custom elements. https://codepen.io/mcareydsgn/pen/ByodWNO
I already got something working using popover and anchor.
But thx
I did not expect my dropdown to work in edge, I thought anchor wasn't baseline?
Edge is Chromium. It should not work in FireFox or Safari
Ye realized that
Works on firefox need to somehow test it on safari.