How to improve appearance of customizable select
https://codepen.io/Fakeur/pen/wBMebjx
Hello, consider this codepen, this is how far I was able to go with customizable select but I don't know, is the design good? I mean is it "eye catching", I'm still struggling a bit with the customizable select, for instance, does anyone know why the value I select seem to apart "cut-off" at the bottom pls.
Is the select dropdown too big compared to the "sort by" label?
Any other ideas are appreciated :c
2 Replies
I assume that you are aware that the code that you have used is (presumably from the MDN article in the previous post) is experimental and won't work on all browsers.
I would suggest adding a type="button" * to the button just in case you use this within a form and the browser doesn't support the customizable select as otherwise it might submit the form.
** With buttons you should really always define the type as it's default type is "submit".*
Regarding the selected value being cut off at the bottom, I suspect that this may be related to your small line height which you have set on the body. If you give that element a larger line-height it should display the full text.
yep, works fine now, ty