←back to thread

The <select> element can now be customized with CSS

(developer.chrome.com)
507 points tosh | 5 comments | 31 Mar 25 09:11 UTC | HN request time: 0.623s | source
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 #
asddubs ◴[31 Mar 25 15:22 UTC] No.43536090[source]▶
I doubt it'll still be able to do those things. From the article:

>Using base-select loses a number of features and behaviors:

> The <select> doesn't render outside the browser pane.

> It doesn't trigger built-in mobile operating system components.

I have mixed feelings about it. Mobile users, get ready for poorly optimized select elements. On the other hand it reduces the need for javascript for styling forms, which is good

replies(5): >>43536161 #>>43537035 #>>43537996 #>>43539933 #>>43541655 #
wolframhempel ◴[31 Mar 25 15:28 UTC] No.43536161[source]▶
That's fair, but I assume that is the initial implementation. Surely, over time, browser vendors will want to make the full spectrum of select functionality available consistently.
replies(2): >>43536357 #>>43536433 #
dbbk ◴[31 Mar 25 15:54 UTC] No.43536433[source]▶
Definitely not. Why would they let web devs render outside of the browser window? That's a recipe for disaster.
replies(1): >>43538077 #
1. cush ◴[31 Mar 25 18:25 UTC] No.43538077[source]▶
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
replies(3): >>43540599 #>>43542047 #>>43573500 #
2. maccard ◴[31 Mar 25 22:21 UTC] No.43540599[source]▶
If that's all your changing, then why can't you make do with the system default?
3. eurleif ◴[01 Apr 25 01:55 UTC] No.43542047[source]▶
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';
    }
replies(1): >>43548009 #
4. cush ◴[01 Apr 25 15:32 UTC] No.43548009[source]▶
Yeah, it only works in Chrome
5. afiori ◴[03 Apr 25 18:24 UTC] No.43573500[source]▶
I think that you can compose arbitrary images that way using an image-like font (using various Unicode chars and assigning to each a small tile of the full image)

Actually I am now curious of how much detail/size/colours/animations you can fit in a single letter.