Login
You're viewing the front-end.social public feed.
  • Jen Simmonsjensimmons
    Mar 21, 2025, 10:00 PM

    There it is! Finally, a real solution for how to style all of the HTML form controls using your own custom CSS to change anything — building on an interoperable UA set of defaults. It only took 30 years!

    First will be the chance to style the “in-page” controls (the part embedded in the webpage), plus the popover for <select> (the part that appears “over top of” the page). Later we’ll do popovers for more things — like the date picker, etc.

    Read about it here: drafts.csswg.org/css-forms/

    Screenshot of CSS Form Control Styling Level 1 First Public Working Draft web standard from the W3C's CSS Working Group
    💬 18🔄 165⭐ 286

Replies

  • Jen Simmonsjensimmons
    Mar 21, 2025, 11:37 PM

    Some things to know:

    - This complements the work Open UI is doing (on popover, <select>, etc). It does not *compete*. They go together.

    - This CSS specification aims to let you style *all existing form controls*. We believe in creating a single comprehensive system for the entire thing all at once, not layering ideas on top of each other piecemeal, having to fix mistakes we just made.

    - We want feedback to make sure we get the whole plan right before any browser ships. Which will take time.

    💬 2🔄 13⭐ 41
  • 💬 2🔄 0⭐ 0
  • Jen Simmonsjensimmons
    Mar 21, 2025, 10:05 PM

    @knowler Not yet. The First Public Working Draft was just published yesterday.

    💬 0🔄 0⭐ 2
  • LukeLukew@toot.wales
    Mar 22, 2025, 9:19 AM

    @knowler @jensimmons fwiw I've been doing some very rough prototyping both via custom elements and browser hacking (just replacing the existing stylesheet rather than dealing with the appearance switch) to see what kind of UA stylesheet rules we might be missing (that's already fed some changes into the spec).

    💬 0🔄 0⭐ 0
  • Thomas Michael Semmlernachtfunke@indieweb.social
    Mar 21, 2025, 10:08 PM

    @jensimmons yes, this is what I want and what I think we need. Not creating DOM nodes with CSS for carousels.

    Very excited for this, especially that this evolving via standard first.

    💬 1🔄 0⭐ 2
  • Jen Simmonsjensimmons
    Mar 21, 2025, 11:27 PM

    @nachtfunke Standards-first is truly important. People have had ideas of how form controls and their custom styling should work for THIRTY YEARS. There is no lack of ideas. What's been lacking is consensus on how to move forward. Anyone pushing a one-company / one-person agenda without true cross-browser, cross-working-group consensus is not going to break the three-decade old log jam.

    💬 0🔄 1⭐ 11
  • 💬 1🔄 0⭐ 2
  • Jen Simmonsjensimmons
    Mar 21, 2025, 11:24 PM

    @yatil Yes! Hopefully it will be a massive change, and web developers will stop avoiding HTML form controls. The work Open UI is doing to add functionality will be key as well, so more complex (than the OG) controls can also be in HTML.

    💬 0🔄 2⭐ 7
  • shomshom@gts.shom.dev
    Mar 21, 2025, 10:43 PM

    @jensimmons so when this gets implemented we're legally allowed to put a piece of tape under the mouse of every developer that doesn't use standard form controls?!

    💬 0🔄 0⭐ 1
  • 💬 0🔄 0⭐ 0
  • 💬 1🔄 1⭐ 2
  • 💬 1🔄 0⭐ 9
  • 💬 0🔄 0⭐ 0
  • 💬 0🔄 0⭐ 1
  • Jon Lunmanjlunman@mastodon.social
    Mar 22, 2025, 12:19 AM

    @jensimmons I am overjoyed to see progress on this. I feel like form controls have been neglected for over a decade, with inconsistent browser implementations that are difficult or impossible to override. This has lead to so many bloated JS component libraries reinventing basic form inputs out of divs. 🤮

    I can't wait to see where this goes.

    💬 0🔄 0⭐ 1
  • 👻 Furbland's Very Spooky Account™ 👻GroupNebula563@mastodon.social
    Mar 22, 2025, 12:34 AM

    @jensimmons I will have you know, Mx. AI-Generated-PFP-For-No-Reason, that I am still using tables with the BGCOLOR attribute. The other day, I gave a website a vertical <marquee>. I don't really grasp what a flexbox is, can't you just do that with tables?

    I hope this post distresses you significantly /lh

    💬 1🔄 0⭐ 0
  • 👻 Furbland's Very Spooky Account™ 👻GroupNebula563@mastodon.social
    Mar 22, 2025, 12:37 AM

    @jensimmons I code like it is 1997 and you cannot stop me. As a result of this, I have had no problems with forms because I do not need to put them in a JS carousel or make their buttons flat or whatever it is people are doing with forms these days.

    I still put HTML comments in all my script and style tags.

    💬 0🔄 0⭐ 0
  • 💬 0🔄 0⭐ 0
  • 💬 0🔄 0⭐ 0
  • 💬 0🔄 0⭐ 0
  • 💬 0🔄 0⭐ 0
  • zefuzefu@hachyderm.io
    Mar 22, 2025, 2:35 PM

    @jensimmons all I ever wanted were UI controls that look ok without any styling, like any other UI toolkit ever made.

    💬 0🔄 0⭐ 0
  • 💬 0🔄 0⭐ 0
  • medium rare birdmigratory@jorts.horse
    Mar 22, 2025, 6:43 PM

    @jensimmons I've always thought it's nicest to work with native form controls that look the way I'm familiar with. what advantage is there to letting the page author control their appearance?

    💬 1🔄 0⭐ 0
  • tambourinemantambourineman@mastodon.cloud
    Mar 23, 2025, 1:11 AM

    @migratory @jensimmons web devs/designers will do it anyway hacking with divs and JS, but it’s never as accessible, predictable, bug-free and fast as the native controls. There will be no excuse not to use them.

    💬 0🔄 0⭐ 0
  • Torsteintorsteinv@mastodon.social
    Mar 23, 2025, 1:17 PM

    @jensimmons @siracusa can someone eli5 please? i feel like i should be excited about this, but i am not a web developer so i don't understand what's this about.

    💬 1🔄 0⭐ 0
  • Jen Simmonsjensimmons
    Mar 23, 2025, 7:19 PM

    @torsteinv @siracusa Since the very beginning, the web has been interactive. HTML includes form controls in the programming language. But often web developers don’t use them, and instead try to build their own with JavaScript. (Usually slower and without proper accessibility.) Why do they do this? They either need functionality that HTML doesn’t have, or they want to visually style them with custom branding.

    This proposal invents technology to solve the second problem.

    💬 0🔄 1⭐ 3
  • 💬 0🔄 0⭐ 0
  • 💬 0🔄 0⭐ 0