diff --git a/source b/source index b8a0cef9a14..9c6fc1d3efb 100644 --- a/source +++ b/source @@ -3994,6 +3994,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • The concept widget
  • The concept native appearance
  • The concept primitive appearance
  • +
  • The concept base appearance
  • The concept element with default preferred size
  • The non-devolvable widget and devolvable widget classification, and the related @@ -137247,6 +137248,109 @@ progress { appearance: auto; } + +

    The following styles are expected to apply to select elements when they are being + rendered as a drop-down box with base appearance:

    + +
    @namespace "http://www.w3.org/1999/xhtml";
    +
    +select {
    +  padding-block: 0.25em;
    +  padding-inline: 0.5em;
    +  border-radius: 0.5em;
    +  min-block-size: max(24px, 1lh);
    +  min-inline-size: 24px;
    +  box-sizing: border-box;
    +  display: inline-flex;
    +  gap: 1em;
    +  border: 1px solid currentColor;
    +  background-color: transparent;
    +  color: inherit;
    +  user-select: none;
    +}
    +
    +select > button:first-child {
    +  all: unset;
    +  display: contents;
    +  interactivity: inert;
    +}
    +
    +::picker(select) {
    +  color: CanvasText;
    +  background-color: Canvas;
    +  border: 1px solid;
    +  box-sizing: border-box;
    +  padding: 0;
    +  inset: auto;
    +  margin: 0;
    +  min-inline-size: anchor-size(self-inline);
    +  min-block-size: 1lh;
    +  max-block-size: stretch;
    +  overflow: auto;
    +  position-area: block-end span-inline-end;
    +  position-try-order: most-block-size;
    +  position-try-fallbacks:
    +    block-start span-inline-end,
    +    block-end span-inline-start,
    +    block-start span-inline-start;
    +}
    +
    +select option {
    +  min-inline-size: 24px;
    +  min-block-size: max(24px, 1lh);
    +  align-content: center;
    +  display: flex;
    +  align-items: center;
    +  gap: 0.5em;
    +  white-space: nowrap;
    +}
    +
    +select optgroup {
    +  font-weight: bolder;
    +}
    +
    +select optgroup option {
    +  font-weight: normal;
    +}
    +
    +select legend,
    +select option {
    +  padding-inline: 0.5em;
    +}
    +
    +select option::checkmark {
    +  content: '\2713' / '';
    +}
    +select option:not(:checked)::checkmark {
    +  visibility: hidden;
    +}
    +select::picker-icon {
    +  margin-inline-start: auto;
    +  display: block;
    +  content: counter(fake-counter-name, disclosure-open);
    +}
    +
    +select:enabled:hover {
    +  background-color: color-mix(in lab, currentColor 10%, transparent);
    +}
    +select:enabled:active  {
    +  background-color: color-mix(in lab, currentColor 20%, transparent);
    +}
    +select:disabled {
    +  color: color-mix(in srgb, currentColor 50%, transparent);
    +}
    +
    +select option:enabled:hover {
    +  background-color: color-mix(in lab, currentColor 10%, transparent);
    +}
    +select option:enabled:active {
    +  background-color: color-mix(in lab, currentColor 20%, transparent);
    +}
    +select option:disabled {
    +  color: color-mix(in lab, currentColor 50%, transparent);
    +}
    + +