It's not a replacement for select as you still need an input to tie it to but it seems to handle filtering a list of options nicely.
Also, if you have two selects with the same list in it, you can do it once with datalist and have two inputs, say a list of clients with client_a and client_b for inputs.
I don't quite care for how it displays the value, like if you put the ID as the value and the client name in the option element, you can filter by the ID or the name but the input will show the ID only.
macOS Safari's <select>: https://imgur.com/a/05YWDCc
macOS Safari's <datalist>: https://imgur.com/a/4f3JwuA
There are SO, SO, SO many things wrong with Safari's datalist element here. Esc doesn't close it (close from keyboard by switching tabs...). There's no hover effect on the options. The active background color is more saturated than the system's accent color (typical for iPadOS/Catalyst junk). There's no left/right margin, and no border radius, on the options. Option text isn't vertically centered. The font is different (it seems differently aliased? Perhaps just larger). The datalist element itself lacks the same border-radius of select. On select elements, selection does not wrap (down arrow with the last option active); on datalist it does.
Here's an egregious one - when you zoom in with Cmd-+ a few times, this is how the <select> element looks: https://imgur.com/a/Vpu536j
And this is <datalist>: https://imgur.com/a/JrfXLW9
Argh! I used to revere Apple for sweating the details. Their UI/UX quality inspired me to become a frontend dev.
Today, they ship things that wouldn't pass Q/A at my worst jobs.
I do wonder if the metrics show the average person downloads Chrome straight away so they’re just not investing heavily in it? I mean anyway, who browses traditional websites any more, right…?
The only reason they had that burst of activity is that they needed to quickly catch up and save face in an attempt to prove to EU regulators that they weren't hampering developers.
The EU didn't buy it and forced Apple to open up their devices to allow alternate app stores and browsers on their devices in the EU.
Can't speak to how accurate this is, but for WebXR, this hits the nail on the head. Purposeful stagnation on supporting it and thus indirectly bringing down the whole point of the standard, pushing of their own AppStore bound ARKit, and when they released Apple Vision Pro it's magically supported again, because I guess they needed content that badly.
https://jsfiddle.net/nhu4zef2/
This is one occurs in every browser when if you want to have a list but send the ID for the item instead of the value, it shows the value in the list and you can search by the ID or the value but the result in the input shows just the ID. User's should be not be required to know the ID of something. Like say a list of clients where user's know them by name but necessarily by ID but the database links them by ID.
Select: https://imgur.com/a/fi1SPBJ
Datalist: https://imgur.com/a/sTiQhPF
This looks exactly like an iOS control now. The multiply effect on the scrollbar is comically out of place.
Some of the other examples like using it with the slider and the color picker seem like they're useful.
The reason is I have macOS set up to always show scroll bars, instead of hiding them. At least one browser (I forget which, but I test on Safari, Firefox and Chrome) doesn’t have a disabled scroll bar but removes it altogether. This makes the page wider and causes it to reflow and move.
Does anyone know how to keep the scroll bar onscreen, just not enabled?
body:has(dialog[open]) {
overflow: hidden;
}
Per MDN When implementing modal dialogs, everything other than the <dialog> and its contents should be rendered inert using the inert attribute.[1]
`body[inert] { overflow: hidden; }`
This would be better, and is what I was getting at. I can't edit the other comment unfortunately.
[0]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...
[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...
That section of the MDN article is somewhat confusing but if the dialog is opened using the `.showModal()` method, there's no need to add an `inert` attribute yourself, the browser automatically makes the rest of the page inert.
If a <dialog> that's meant to be modal is opened not using `.showModal()`, say by making it a `popover` and the `popovertarget` of a button, then you might set `inert` yourself (and remove it when the <dialog> is closed). However, you can't simply do <body inert> if that <dialog> is inside the <body> because then the dialog itself would be inert.
dialog::backdrop {
backdrop-filter: blur(2px);
}
It seems you can use the transform3d trick to kick it to the GPU to help fix it.
> If you want to see a decent quick example of them in action, you can check out my game Jumblie and click the Settings gear button at the top.
It has the backdrop filter but it doesn't prevent page scrolling.
BTW, MDN's data on Safari's support for the unprefixed `backdrop-filter` property is wrong, it still sometimes requires using `-webkit-backdrop-filter` (works in iOS Safari 18.2.1, doesn't work in Safari 18.2 on macOS 14.7.1).
I remember I had a hard time trying to stretch dialog to full screen for mobile devices, but it actually didn't want to work. The code was something like this:
dialog { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; }
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_...