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 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);
+}
+
+