diff --git a/source b/source index 2f6d690e48d..454c05e703e 100644 --- a/source +++ b/source @@ -3997,6 +3997,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 {
+ text-transform: initial;
+ text-align: initial;
+ text-indent: initial;
+ background-color: transparent;
+ border: 1px solid currentColor;
+ padding-block: 0.25em;
+ padding-inline: 0.5em;
+ min-block-size: max(24px, 1lh);
+ min-inline-size: 24px;
+ display: inline-flex;
+ gap: 0.5em;
+ border-radius: 0.5em;
+ user-select: none;
+ box-sizing: border-box;
+ field-sizing: content !important;
+}
+
+select > button:first-child {
+ all: unset;
+ display: contents;
+ interactivity: inert;
+}
+
+select:enabled:hover,
+select option:enabled:hover {
+ background-color: color-mix(in lab, currentColor 10%, transparent);
+}
+select:enabled:active,
+select option:enabled:active {
+ background-color: color-mix(in lab, currentColor 20%, transparent);
+}
+select:disabled,
+select option:disabled {
+ color: color-mix(in lab, currentColor 50%, transparent);
+}
+
+::picker(select) {
+ box-sizing: border-box;
+ border: 1px solid;
+ padding: 0;
+ color: CanvasText;
+ background-color: Canvas;
+ margin: 0;
+ inset: auto;
+ min-inline-size: anchor-size(self-inline);
+ 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);
+ padding-inline: 0.5em;
+ padding-block-end: 0;
+ display: flex;
+ align-items: center;
+ gap: 0.5em;
+ white-space: nowrap;
+}
+
+
+select option::checkmark {
+ content: '\2713' / '';
+}
+select option:not(:checked)::checkmark {
+ visibility: hidden;
+}
+
+select::picker-icon {
+ content: counter(fake-counter-name, disclosure-open);
+ display: block;
+ margin-inline-start: auto;
+}
+
+select optgroup {
+ font-weight: bolder;
+}
+
+select optgroup option {
+ font-weight: normal;
+}
+
+select optgroup legend {
+ padding-inline: 0.5em;
+ min-block-size: 1lh;
+}