Re: [csswg-drafts] [css-forms-1] `::field-separator` mechanism to determine what type of separator (#11852)

{I'm just copying my comment over from https://github.com/w3c/csswg-drafts/issues/11889, since I didn't notice this issue before posting.}

-----

I appreciate the effort to give the UA enough control to handle things like internationalization. However, I'm afraid the customizability isn't enough for these controls, with the proposed pseudo element scheme. The proposal says:

> `::field-component` The [::field-component](https://drafts.csswg.org/css-forms/#selectordef-field-component) pseudo-element represents the portions of the control that contain the date/time component values.
> `::field-separator` The [::field-separator](https://drafts.csswg.org/css-forms/#selectordef-field-separator) pseudo-element represents the portions of the control that separate the date/time component values if the user agent provides those portions.

But how, e.g., would a developer style the "month" field differently from the "day" field, e.g. making the month red and the day blue? And how would `::field-separator` work for a `datetime` control, which commonly looks like this:

![Image](https://github.com/user-attachments/assets/26aad68b-005c-43c7-b864-afcc614de272)

In this case, there are four different separators: `/`, `:`, `,`, and ` `. So the developer can't customize these at all without breaking the control, because they don't know which `::field-separator` is which. Also I don't think (?) they can even select by position, because pseudo elements can't reveal their position with `::nth-child`?

Additionally, the in-page control for date/time controls often have other "buttons" such as a clear button (a very common request/complaint from developers [1](crbug.com/40865679),[2](crbug.com/40697299),[3](crbug.com/40697001),[4](crbug.com/40695378),[5](crbug.com/40695091)) or a "today" button, etc. These buttons might want to be provided via custom element button controls, also. Some design systems very commonly include an entire calendar picker in the page, e.g. on airline reservation sites to pick start and end dates.

Generally, it feels like date/time controls might need more composability - the ability to include custom HTML within the parts of the in-page control. I'm afraid there might be many use cases that aren't addressed with a CSS-only approach.

-- 
GitHub Notification of comment by mfreed7
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11852#issuecomment-2714618653 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 11 March 2025 14:48:49 UTC