Re: [csswg-drafts] [css-ui] Changing UA styles based on the computed value of the appearance property (#10028)

Hi, I worked with @argyleink to explore how developers might style a [checkbox](https://codepen.io/argyleink/pen/oNOYgOz/3a812d909092779dd77dd2811d5a19f0), [switch](https://codepen.io/argyleink/pen/zYXNBxN/ef7802e32a9f74178dabba68f6e9067e) or [range](https://codepen.io/argyleink/pen/PogWbvy/602efe55a26e5f59a95f74d8a8d749c9) control on top of `appearance:base` . The prototype assumes that the UA stylesheet for `input` doesn’t change, but that rules for pseudo-element box tree children can be added as we define them (in particular, look at the `@layer demo.base` cascade layer). It also assumes a rendering model where pseudo-element contents like checkbox glyph and range are replaceable slot-style and are descendants in the layout tree.

Note: `<select>` should be fine also, based on another analysis @josepharhar and I did of the UA style sheet for that element that he referred to earlier. There are also various `<selectlist>` [examples](https://codepen.io/argyleink/pen/wvYrZEV/ab71f1b613db0487f64ff8c6919b0173) (from a previous design) that demonstrate the concept.

Again, these are not API proposals, but just data to show styling can work, to validate that the current design path regarding CSS is feasible for additional form controls.

In the prototypes you'll find markup like:

```
<base-checkbox tabindex=0>
      <base-mark class="base">
            <svg viewBox="0 0 512 512"><path d="M416 128L192 384l-96-96"/></svg>
      </base-mark>
</base-checkbox>
```

The intent of the custom elements is to help articulate an end result where in the box tree the marker is under the input:

```
Input
  Marker
    <developer content>
```

The range input needs more parts than just a custom checkmark; the shape of it is like this (modeled very much after what has already been shipped):

```
<base-range tabindex=0>
      <base-range-container>
          <base-track></base-track>
          <base-progress></base-progress>
          <base-thumb></base-thumb>
      </base-range-container>
</base-range>
```

When `appearance: base` is used on a range, the resulting box tree looks something like this:

```
Input
  Group
    Track
      <developer content>
    Progress
      <developer content>
    Thumb
      <developer content>
```

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


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

Received on Friday, 22 March 2024 18:57:43 UTC