/*
* Copyright 2022 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*
* The default style sheet used to render <selectlist> elements
* (HTMLSelectListElement enabled).
*/
@namespace "http://www.w3.org/1999/xhtml";
selectlist {
display: inline-flex;
font-family: sans-serif;
font-size: .875em;
user-select: none;
}
selectlist::-internal-selectlist-button {
color: FieldText;
background-color: Field;
appearance: none;
padding: 0.25em;
border: 1px solid ButtonBorder;
border-radius: 0.25em;
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;
}
selectlist::-internal-selectlist-selected-value {
color: inherit;
min-width:0px;
max-height:100%;
flex-grow:1;
flex-shrink:1;
overflow-x:hidden;
overflow-y:hidden;
}
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:last-child {
padding-bottom: 0;
}
selectlist optgroup > option {
padding-left: 0.75em;
}
selectlist::-internal-selectlist-button-icon {
background-image: light-dark(url(images/selectlist_button_icon.svg), url(images/selectlist_button_icon_white.svg));
background-origin: content-box;
background-repeat: no-repeat;
background-size: contain;
height: 1.0em;
margin-inline-start: 4px;
opacity: 1;
outline: none;
padding-bottom: 2px;
padding-inline-start: 3px;
padding-inline-end: 3px;
padding-top: 2px;
width: 1.2em;
min-width: 1.2em;
max-width: 1.2em;
}
selectlist:-internal-autofill-selected::-internal-selectlist-button {
background-image:none !important;
background-color: light-dark(#E8F0FE, rgba(70,90,126,0.4)) !important;
color: FieldText !important;
}
selectlist:disabled::-internal-selectlist-button {
color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
border-color: light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3));
opacity: 0.7;
}
selectlist option:disabled {
color: GrayText;
background-color: initial;
}
/* remove highlight on disabled options, making them visually un-selectable */
selectlist option:disabled:hover {
background-color: transparent;
}
selectlist option:checked:disabled {
background-color: light-dark(rgb(176, 176, 176), rgba(59, 59, 59, 0.3));
}
selectlist::-internal-selectlist-listbox,
/* The [popover] part is added to increase specificity to make the border below
override the border set by the [popover] rule in html.css */
selectlist::-internal-selectlist-preview[popover],
selectlist > listbox {
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: 0.25em 0;
}
selectlist::-internal-selectlist-listbox,
selectlist > listbox {
background-color: Field;
}
/* TODO(github.com/openui/open-ui/issues/645): We need a better way to correctly
* select author-provided listboxes. This doesn't work if the listbox is
* provided from an outer tree scope. */
selectlist [behavior=listbox],
selectlist::-internal-selectlist-listbox,
selectlist::-internal-selectlist-preview,
selectlist > listbox {
margin: 0;
inset: auto;
min-inline-size: anchor-size(self-inline);
}
selectlist [behavior=listbox],
selectlist::-internal-selectlist-listbox,
selectlist > listbox {
min-block-size: 1lh;
inset-block-start: anchor(self-end);
inset-inline-start: anchor(self-start);
position-try:
-internal-selectlist-listbox-reverse-block,
-internal-selectlist-listbox-reverse-inline,
-internal-selectlist-listbox-reverse-both,
-internal-selectlist-listbox-default-fill,
-internal-selectlist-listbox-reverse-block-fill,
-internal-selectlist-listbox-reverse-inline-fill,
-internal-selectlist-listbox-reverse-both-fill;
}
/* TODO(crbug.com/40279608): Use automatic fallbacks */
/* Fallbacks without vertical scrolling */
@position-try -internal-selectlist-listbox-reverse-block {
inset: auto;
/* Reverse block axis */
inset-block-end: anchor(self-start);
inset-inline-start: anchor(self-start);
}
@position-try -internal-selectlist-listbox-reverse-inline {
inset: auto;
/* Reverse inline axis */
inset-block-start: anchor(self-end);
inset-inline-end: anchor(self-end);
}
@position-try -internal-selectlist-listbox-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-selectlist-listbox-default-fill {
inset: auto;
inset-block-start: anchor(self-end);
inset-inline-start: anchor(self-start);
block-size: -webkit-fill-available;
}
@position-try -internal-selectlist-listbox-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-selectlist-listbox-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-selectlist-listbox-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;
}
selectlist::-internal-selectlist-preview {
min-block-size: anchor-size(self-block);
inset-block-start: anchor(self-start);
inset-inline-start: anchor(self-start);
position-try:
-internal-selectlist-preview-reverse-block,
-internal-selectlist-preview-reverse-inline,
-internal-selectlist-preview-reverse-both;
background-color: light-dark(#E8F0FE, rgba(70, 90, 126, 0.4));
}
/* TODO(crbug.com/40279608): Use automatic fallbacks */
@position-try -internal-selectlist-preview-reverse-block {
inset: auto;
/* Reverse block axis */
inset-block-end: anchor(self-end);
inset-inline-start: anchor(self-start);
}
@position-try -internal-selectlist-preview-reverse-inline {
inset: auto;
/* Reverse inline axis */
inset-block-start: anchor(self-start);
inset-inline-end: anchor(self-end);
}
@position-try -internal-selectlist-preview-reverse-both {
inset: auto;
/* Reverse both axes */
inset-block-end: anchor(self-end);
inset-inline-end: anchor(self-end);
}
/* this is a copy of the [popover] styles from html.css. When this gets
* merged with html.css, the rules can be combined. */
selectlist::-internal-selectlist-listbox,
selectlist > listbox {
position: fixed;
width: fit-content;
height: fit-content;
margin: 0;
border: solid;
padding: 0.25em;
overflow: auto;
color: CanvasText;
background-color: Canvas;
}
selectlist::-internal-selectlist-listbox:not(:popover-open),
selectlist > listbox:not(:popover-open) {
display: none;
}
selectlist::-internal-selectlist-listbox,
selectlist > listbox:popover-open {
overlay: auto !important;
}
selectlist::-internal-selectlist-listbox:-internal-popover-in-top-layer::backdrop,
selectlist > listbox:-internal-popover-in-top-layer::backdrop {
/* From the (modified) fullscreen spec: https://fullscreen.spec.whatwg.org/#user-agent-level-style-sheet-defaults: */
position: fixed;
inset: 0;
/* Specific to [popover]: */
pointer-events: none !important;
background-color: transparent;
}
Codebase Browser
chromium