[selectmenu] Decide on standardized default styles for `appearance:base-select`

[mfreed7]

Per the resolution on 536, we will have <selectmenu> come with default styles that are standardized. (These can be opted-out via selectmenu {appearance:auto} in CSS.)

This issue is to brainstorm/bikeshed what those default styles should be. One interesting point, raised by @jonathantneal, is that perhaps the default styles should use media queries for things like dark mode and perhaps screen size.

Purely as a way to see what types of styles might be needed, here is a link to the Chromium prototype's stylesheet for <selectmenu>. It contains styling for the button, icon, options, and the listbox. We will likely need to decide on a set of defaults for each of these things. Ideally, the standardized CSS can be shortened significantly from the .css file I linked above. Just enough to make it easy to use and clear. What is the minimum CSS that achieves that goal?

Thoughts? Proposals?

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[josepharhar]

I propose that we use the stylesheet mason linked for appearance:none. It is worth noting that we are currently developing the regular (not none) appearance and wish for that appearance to be implemented across browsers as well.

[mfreed7]

I propose that we use the stylesheet mason linked for appearance:none.

We're working on an improved version of the base styling for <selectmenu> so let's not resolve on the old version just yet. Soon, though.

It is worth noting that we are currently developing the regular (not none) appearance and wish for that appearance to be implemented across browsers as well.

So actually, the appearance:none CSS is what we'd like to standardize. The appearance:auto look and feel is the one that can be customized by different UA's, and doesn't need to be standardized.

[mfreed7]

This comment is likely premature. But given the discussion on https://github.com/openui/open-ui/issues/787#issuecomment-1682814483, I wanted to kick start the conversation around what some interoperable default styles might look like for <selectlist>.

Here's very roughly what's implemented in the Chromium prototype at the moment:

selectlist {
  display: inline-flex;
  user-select: none;
  font-family: sans-serif;
  font-size: .875em;
}

selectlist::-internal-selectlist-button {
  /* This is applied to the in-page button - selector above TBD */
  color: FieldText;
  background-color: Field;
  border: 1px solid ButtonBorder;
  border-radius: 0.25em;
  cursor: default;
  display: inline-flex;
  flex-grow:1;
  flex-shrink:1;
  font-size:inherit;
  appearance: none;
  align-items: center;
  overflow-x:hidden;
  overflow-y:hidden;
  padding: 0.25em;
  text-align: inherit;
}

selectlist option {
  font-size: .875em;
  padding: 0.25em;
}

selectlist option:hover {
  color: SelectedItemText;
  background-color: SelectedItem;
  cursor: default;
  user-select: none;
}

selectlist optgroup {
  padding-bottom: 0.75em;
}

selectlist optgroup > option {
  padding-left: 0.75em;
}

selectlist optgroup:last-child {
  padding-bottom: 0;
}

selectlist option:disabled {
  color: GrayText;
  background-color: initial;
}

selectlist option:disabled:hover {
  background-color: transparent;
}

selectlist::-internal-selectlist-listbox {
  /* This is applied to the contained popover listbox - selector above TBD */
  padding: 0.25em 0;
  overflow: auto;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25em;
  box-shadow: pick a good default box shadow that separates the picker from the page;
  box-sizing: border-box;
}

selectlist::-internal-selectlist-listbox {
  background-color: Field;
}

/* Pointer:coarse --> make the options larger and easier to pick */
@media (pointer: coarse) {
  selectlist option {
    padding: 0.5em;
    font-size: 1em;
  }
}

/* Pointer:coarse and max width in physical units --> make the listbox take over more of the screen */
@media (pointer: coarse) and (max-width: 10cm) {
  selectlist::-internal-selectlist-listbox {
    inset: 0;
    margin: auto;
    max-height: 50%;
    padding: 0.25em 0;
    box-shadow: none;
    border-radius: 0.5em;
    border: none;
  }
  selectlist::-internal-selectlist-listbox::backdrop {
    background-color: rgba(0, 0, 0, .7);
  }
}

@media (pointer: coarse) and (max-width: 3cm) {
 /* Very small screen styles here? E.g. watch face */
}

There are a number of things missing or questionable above, such as positioning (which will require anchor positioning). But I wanted to put this out there, so we can start really seeing what styles we're talking about, and simplify/converge on a small, good set of default CSS values to use. I'm not arguing that the Chromium styles above need to be the final styles, I'm just providing a starting point for the discussion about:

1. What a set of interoperable, non-opinionated styling might look like.
2. What selectors and conditions need to be considered.
3. What media queries might need to be included.

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[josepharhar]

In the current state of things, we won't get to change the styles for the select element itself since we are using the css appearance property to switch into the new mode, but we still get to add pretty much all the styling by adding styles which target the child button, datalist, and option elements.

[lukewarlow]

Just a note for something that came up in todays meeting, I think we should be making field-sizing: content the new default for appearance: base-foo; styles. The legacy fixed styles shouldn't exist going forwards.