For years the <select> element has been notoriously difficult to style. Developers had to either accept the browser’s default look or resort ...
For further actions, you may consider blocking this person and/or reporting abuse
I have some concerns about this - a lot of devices have their own native way of presenting choices (like the rolodex thing on iOS for example). In the same way as with the JS solutions, we don't want to be replacing the familiar, optimised native behaviour - at least not in all circumstances. And if we do it only in some cases, then the app becomes inconsistent.
I'm not sure what the solution is, though.
Fortunately you only see the replaced
listmenuon desktop leaving mobile with its native feel, that's how it works on android at least we'll have to wait and see if its the same on iOS.i didnt know we can add codepen in the post cool
Nice overview of base-select! It’s great to see CSS addressing the styling issue without needing JavaScript. The native styling options for the picker and options look promising, and the shadcn/ui demo is a solid example. Limited browser support is a challenge for now, but I’m looking forward to using this once it’s more widely available. Good post!
Good information provided, thanks
You're welcome 😊
How are you highlighting your code here?
... to specify the language:
More details in the editor guide.
I meant the "glow" on the
&::picker(select). Sorry for the confusion!Oh, that's because the linter Forem are using doesn't know what it is. The glow is the error state.
Oh, interesting. Thanks!
To bad these sort of 'fixes' aren't cross-browser or -device and if I'm not mistaken semantically incorrect. Interesting post nonetheless..
This will be cross browser. It's new to the spec it just so happens that chrome were the first to implement it. 😊
Thanks for the resource