Most active commenters
  • recursive(3)

←back to thread

The <select> element can now be customized with CSS

(developer.chrome.com)
499 points tosh | 14 comments | 31 Mar 25 09:11 UTC | HN request time: 1.638s | source | bottom
Show context
wolframhempel ◴[31 Mar 25 15:14 UTC] No.43535984[source]▶
The fact that I'm disproportionally excited about this probably dates me as an early 2000s web developer. But since selects can do things that you simply cannot recreate in HTML, e.g. have options drop downs that extend outside the viewport boundaries, makes this a really helpful feature.

Now, do autocompletes and tag selectors next...

replies(6): >>43536012 #>>43536059 #>>43536090 #>>43537120 #>>43537585 #>>43539203 #
majora2007 ◴[31 Mar 25 15:17 UTC] No.43536012[source]▶
It's actually crazy that we don't have a basic typeahead component or tag selector in this day and age with HTML. Every web page I've ever built has needed these components and while there are libraries out there, they all have an annoying bug here or there.

But considering we are just now getting Select tags with styling, signals how long it might take for a typeahead which is vastly more complex.

replies(3): >>43536038 #>>43536102 #>>43541305 #
jhardy54 ◴[31 Mar 25 15:18 UTC] No.43536038[source]▶
> basic typeahead

It isn’t perfect, but have you tried <datalist>?

Totally agree about tag pickers, I was bummed to see that Bootstrap didn’t have a tag selector component either.

replies(1): >>43536363 #
1. mlhpdx ◴[31 Mar 25 15:47 UTC] No.43536363[source]▶
I have, and failed.

See https://news.ycombinator.com/item?id=40265782

replies(3): >>43537542 #>>43537676 #>>43538104 #
2. recursive ◴[31 Mar 25 17:32 UTC] No.43537542[source]▶
Safari is the "new" IE. I put "new" in quotes because it's been this way for like a decade.
replies(2): >>43539120 #>>43539152 #
3. ◴[31 Mar 25 17:44 UTC] No.43537676[source]▶
4. ricenews ◴[31 Mar 25 18:27 UTC] No.43538104[source]▶
It may not be present in Apple’s official documentation but it has been supported since Safari 12.2.

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da... compatibility. The demo on that page works for me in current Safari on both iOS and Mac.

replies(2): >>43542241 #>>43560411 #
5. facile3232 ◴[31 Mar 25 19:53 UTC] No.43539120[source]▶
If anything chrome is the engine with odd quirks you are forced to work around.
replies(2): >>43539943 #>>43541669 #
6. troupo ◴[31 Mar 25 19:56 UTC] No.43539152[source]▶
--- start quote ---

Back fifteen years ago IE held back the web because web developers had to cater to its outdated technology stack. “Best viewed with IE” and all that. But do you ever see a “Best viewed with Safari” notice? No, you don’t. Another browser takes that special place in web developers’ hearts and minds.

--- end quote ---

https://www.quirksmode.org/blog/archives/2021/08/breaking_th...

replies(1): >>43539938 #
7. recursive ◴[31 Mar 25 21:01 UTC] No.43539938{3}[source]▶
Yes, Safari is not exactly like IE because IE had a dominant user share once upon a time.

We don't see "best viewed in Safari", but we do see plenty of sites that can be viewed in Safari, despite the extra effort used to get them there. And I'm not even a regular chrome user.

replies(1): >>43550945 #
8. recursive ◴[31 Mar 25 21:02 UTC] No.43539943{3}[source]▶
I haven't found this to be the case in my experience.
replies(1): >>43539953 #
9. facile3232 ◴[31 Mar 25 21:03 UTC] No.43539953{4}[source]▶
Maybe it's just iframes that are the issue but they were a devil and a half to get working in chrome (or blink ig) without relying on third party cookies.
replies(1): >>43540804 #
10. progmetaldev ◴[31 Mar 25 22:47 UTC] No.43540804{5}[source]▶
Interested in what you are doing with the iframes. Something with complex authentication? I've been forced to use iframes a few times for 3rd party resources that should have been first-party (mostly with banks and credit unions), and have only had some styling issues on mobile (which have been overcome by using JavaScript and window.matchMedia to check for media queries).
11. immibis ◴[01 Apr 25 00:47 UTC] No.43541669{3}[source]▶
Chrome's quirks become the standard and other browsers have to implement them.
12. no_wizard ◴[01 Apr 25 02:31 UTC] No.43542241[source]▶
Some examples seem to work better than others though. I’m on latest iOS and sometimes it will invoke the native date picker like you’d expect to see, sometimes it won’t, and the type ahead doesn’t seem to work consistently
13. troupo ◴[01 Apr 25 20:23 UTC] No.43550945{4}[source]▶
The absolute vast majority of web sites require no effort to "get there".

The absolute vast majority of those which don't work in Safari use Chrome-only non-standards.

And there is a tiny minority of sites that run into some Safari-specific quirks

14. mlhpdx ◴[02 Apr 25 19:14 UTC] No.43560411[source]▶
That demo shows the problems splendidly. It “only kinda” works on iOS.