Add UA stylesheet for <select> base appearance

whatwg · Aug 5, 2024 · 3e9ef5d · 3e9ef5d
1 parent f828c61
commit 3e9ef5d
Showing 1 changed file with 178 additions and 0 deletions.
diff --git a/source b/source
@@ -135843,6 +135843,184 @@ progress { appearance: auto; }</code></pre>
 
   </div>
 
+  <!-- TODO should this go at the top of the section right below "the select element"? -->
+  <!-- TODO keep this up to date with chromium prototype. -->
+  <!-- TODO the pseudo element names are not decided on yet. -->
+  <!-- TODO file a spec issue, probably in csswg, to get consensus on these values. -->
+  <p>The following styles are expected to apply to <code>select</code> elements when they are being
+  rendered as a <span>drop-down box</span> with <span>base appearance</span>:</p>
+
+  <pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
+
+select {
+  background-color: transparent;
+  border: 0px none transparent;
+
+select > datalist,
+select::select-fallback-datalist {
+  box-shadow: 0px 12.8px 28.8px rgba(0, 0, 0, 0.13), 0px 0px 9.2px rgba(0, 0, 0, 0.11);
+  box-sizing: border-box;
+  overflow: auto;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25em;
+  padding-block: 0.25em;
+  padding-inline: 0;
+  background-color: Field;
+  margin: 0;
+  inset: auto;
+  min-inline-size: anchor-size(self-inline);
+  min-block-size: 1lh;
+  inset-block-start: anchor(self-end);
+  inset-inline-start: anchor(self-start);
+  position-try:
+    -internal-select-datalist-reverse-block,
+    -internal-select-datalist-reverse-inline,
+    -internal-select-datalist-reverse-both,
+    -internal-select-datalist-default-fill,
+    -internal-select-datalist-reverse-block-fill,
+    -internal-select-datalist-reverse-inline-fill,
+    -internal-select-datalist-reverse-both-fill;
+}
+
+/* Fallbacks without vertical scrolling */
+@position-try -internal-select-fallback-datalist-reverse-block {
+  inset: auto;
+  /* Reverse block axis */
+  inset-block-end: anchor(self-start);
+  inset-inline-start: anchor(self-start);
+}
+@position-try -internal-select-fallback-datalist-reverse-inline {
+  inset: auto;
+  /* Reverse inline axis */
+  inset-block-start: anchor(self-end);
+  inset-inline-end: anchor(self-end);
+}
+@position-try -internal-select-fallback-datalist-reverse-both {
+  inset: auto;
+  /* Reverse both axes */
+  inset-block-end: anchor(self-start);
+  inset-inline-end: anchor(self-end);
+}
+
+/* Fallbacks with vertical scrolling */
+@position-try -internal-select-fallback-datalist-default-fill {
+  inset: auto;
+  inset-block-start: anchor(self-end);
+  inset-inline-start: anchor(self-start);
+  block-size: -webkit-fill-available;
+}
+@position-try -internal-select-fallback-datalist-reverse-block-fill {
+  inset: auto;
+  /* Reverse block axis */
+  inset-block-end: anchor(self-start);
+  inset-inline-start: anchor(self-start);
+  block-size: -webkit-fill-available;
+}
+@position-try -internal-select-fallback-datalist-reverse-inline-fill {
+  inset: auto;
+  /* Reverse inline axis */
+  inset-block-start: anchor(self-end);
+  inset-inline-end: anchor(self-end);
+  block-size: -webkit-fill-available;
+}
+@position-try -internal-select-fallback-datalist-reverse-both-fill {
+  inset: auto;
+  /* Reverse both axes */
+  inset-block-end: anchor(self-start);
+  inset-inline-end: anchor(self-end);
+  block-size: -webkit-fill-available;
+}
+
+select > datalist,
+select::select-fallback-datalist {
+  position: fixed;
+  width: fit-content;
+  height: fit-content;
+  color: CanvasText;
+}
+select > datalist:popover-open,
+select::select-fallback-datalist:popover-open {
+  overlay: auto !important;
+  display: block;
+}
+select > datalist:-internal-popover-in-top-layer::backdrop,
+select::select-fallback-datalist:-internal-popover-in-top-layer::backdrop {
+  position: fixed;
+  inset: 0;
+  pointer-events: none !important;
+  background-color: transparent;
+}
+
+select:open > datalist {
+  display: block;
+}
+
+select::select-fallback-button {
+  color: FieldText;
+  background-color: Field;
+  appearance: none;
+  padding: 0.25em;
+  border: 1px solid ButtonBorder;
+  cursor: default;
+  font-size: inherit;
+  text-align: inherit;
+  display: inline-flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  align-items: center;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+select::select-fallback-button-icon {
+  opacity: 1;
+  outline: none;
+  margin-inline-start: 0.25em;
+  padding-block: 2px;
+  padding-inline: 3px;
+  block-size: 1.0em;
+  inline-size: 1.2em;
+  min-inline-size: 1.2em;
+  max-inline-size: 1.2em;
+  display: block;
+
+  color: light-dark(black, white);
+  stroke: currentColor;
+  stroke-width: 3;
+  stroke-linejoin: round;
+}
+
+select::select-fallback-button-text {
+  color: inherit;
+  min-inline-size: 0px;
+  max-block-size: 100%;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+  display: inline;
+}
+
+select option:not(:disabled):hover {
+  background-color: SelectedItem;
+  color: SelectedItemText;
+}
+
+select option {
+  /* min-size rules ensure that we meet accessibility guidelines for minimum target size.
+   * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
+  min-inline-size: 24px;
+  min-block-size: max(24px, 1.2em);
+  align-content: center;
+}
+
+select option::before {
+  content: '\2713' / '';
+}
+select option:not(:checked)::before {
+  visibility: hidden;
+}</code></pre>
+
+
 
   <div w-nodev>