Live data from Hacker News

The element can now be customized with CSS

developer.chrome.com

181–190 of 194 posts

Re: The <select> element can now be customized with CSS

#181
post #76

Earlier quoted context omitted.

There needs to be some middle ground. I'd trade off just being able to set just the background color and font and keep these native-like features

The following works for me in Chrome, and doesn't prevent the menu from going outside of the viewport: select, option { background: red; font-family: 'comic sans ms'; }

Yeah, it only works in Chrome

Re: The <select> element can now be customized with CSS

#182
post #83

firefox issue https://bugzilla.mozilla.org/show_bug.cgi?id=1944403

> priority: Not set

Last update to the issue is a pointer to test results:

https://wpt.fyi/results/html/semantics/forms/the-select-elem...

At least Safari is failing as well, currently, so the FF team has a bit of time.

Re: The <select> element can now be customized with CSS

#183
post #95

Earlier quoted context omitted.

--- 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...

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.

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

Re: The <select> element can now be customized with CSS

#184

Earlier quoted context omitted.

`attr()` has had terrible support which is a shame because it's been around for ages and could have let us do a lot of things without having to implement stuff manually. There's another way to try it though... I'd try putting two separate s inside each option, one for the short description and one for the long description. I'd hide one span with css if it was inside an tag. I'd hide the other span if it was inside a…

Ignoring this new feature, you can't put spans inside an option, only text. It's odd that they have this example in the post for the "old" way but they show it retaining the spans.

You can put s inside an . The 's `innerText` is used to populate the native control's label, meaning the inside of the spans are too.

The problem is that you can't target the span in the original parser.

But, you could use a template, since it's contents are ignored by text content parsers.

You can have your option as:

Normal Difficulty - The way it's meant to be played

With the original parser, this will be parsed as:

Normal Difficulty

And with the new parser (so long as you opt into it with the `appearance: base-select` rule):

Normal Difficulty - The way it's meant to be played

---------------------------

Then once you've opted into the new parser, you can target both the span and template to render how you want. (e.g. Give span a larger font-weight, give template a display mode of block and italicised text)

Re: The <select> element can now be customized with CSS

#185
post #75

Earlier quoted context omitted.

> The doesn't render outside the browser pane. ... It doesn't trigger built-in mobile operating system components. To me, this is intrinsically what makes a a . Styling is great, but without these features, this doesn't really bring anything new to the table

Thanks to humanity, supporting this is a surefire ticket to someone figuring out how to phish credentials through a element.

Certainly, there exists a middle ground between having no options for styling and some options where we don't compromise users

Re: The <select> element can now be customized with CSS

#186
post #50

Earlier quoted context omitted.

I have, and failed. See https://news.ycombinator.com/item?id=40265782

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.

That demo shows the problems splendidly. It “only kinda” works on iOS.

Re: The <select> element can now be customized with CSS

#187

Earlier quoted context omitted.

I'm with you... would be nice to have: Open Dialog ... Close Dialog It would just make so much sense.

> I'm with you... would be nice to have: You can do this right now already: // For opening Open // For closing Close I think the problem here is that it is impossible to actually use the result from `close()`, as it can return a status, IIRC. > It would just make so much sense. That way above that I propose is about as sensible as the way you propose. If there are any problems with my proposal that are solved by your…

The point was to be able to do it without JS.

Re: The <select> element can now be customized with CSS

#188

Earlier quoted context omitted.

Ignoring this new feature, you can't put spans inside an option, only text. It's odd that they have this example in the post for the "old" way but they show it retaining the spans.

You can put s inside an . The 's `innerText` is used to populate the native control's label, meaning the inside of the spans are too. The problem is that you can't target the span in the original parser. But, you could use a template, since it's contents are ignored by text content parsers. You can have your option as: Normal Difficulty - The way it's meant to be played With the original parser, this will be parsed a…

Sure you can do it with this new feature.

I assumed your comment was trying to give the parent commenter a strategy that would work with the "classic" select but I see now that you mentioned "selectedoption" so you were talking about the new one.

Re: The <select> element can now be customized with CSS

#189

Earlier quoted context omitted.

> I'm with you... would be nice to have: You can do this right now already: // For opening Open // For closing Close I think the problem here is that it is impossible to actually use the result from `close()`, as it can return a status, IIRC. > It would just make so much sense. That way above that I propose is about as sensible as the way you propose. If there are any problems with my proposal that are solved by your…

The point was to be able to do it without JS.

I understand, but from a pragmatic viewpoint, it is no more and no less complicated to do it with `onclick` JS than it would be to do it with some other attribute.

For all practical purposes, there is no difference between the two.

I understand that the `onclick` wouldn't fire in browsers where JS is turned off, but in that case (no JS) you're going to have an awful user experience using dialogs even with builtin open/close attributes for dialogs.

Post reply on HN