/* Copyright 2024 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 <select> when the StylableSelect
* feature is enabled.
*/
@namespace "http://www.w3.org/1999/xhtml";
select {
background-color: -internal-appearance-auto-base-select(Field, transparent);
border: -internal-appearance-auto-base-select(1px, 0px),
-internal-appearance-auto-base-select(solid, none),
-internal-appearance-auto-base-select(light-dark(#767676, #858585), transparent);
}
/* Undo unwanted styles from select rules */
select:not(:-internal-list-box) > button,
select::picker(select) {
white-space: normal;
}
select:not(:-internal-list-box)::picker(select) {
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-selectlist-datalist-reverse-block,
-internal-selectlist-datalist-reverse-inline,
-internal-selectlist-datalist-reverse-both,
-internal-selectlist-datalist-default-fill,
-internal-selectlist-datalist-reverse-block-fill,
-internal-selectlist-datalist-reverse-inline-fill,
-internal-selectlist-datalist-reverse-both-fill;
}
/* TODO(crbug.com/40279608): Use automatic fallbacks */
/* 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::select-fallback-button {
color: FieldText;
background-color: Field;
appearance: none;
padding: 0.25em;
border: 1px solid ButtonBorder;
/* TODO(crbug.com/1511354): Adding border-radius here makes it impossible to
* pass the reftest due to indistinguishable differences in a few pixels. */
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;
/* min-size rules ensure that we meet accessibility guidelines for minimum target size.
* https://github.com/openui/open-ui/issues/1026
* https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
/* TODO(crbug.com/1511354): This might be able to be combined with the
* default select option rules at some point. This should be re-evaluted
* before StylableSelect is shipped. */
min-inline-size: 24px;
min-block-size: max(24px, 1.2em);
}
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;
}
/* TODO(crbug.com/1511354): These hover styles should only be applied when
* the select has appearance:base-select. This will be challenging because
* the selector is targeting an option rather than the select itself. However,
* these hover rules don't seem to affect appearance:auto options in the popup
* for now. */
select:not(:-internal-list-box) option:not(:disabled):hover {
background-color: SelectedItem;
color: SelectedItemText;
}
select:not(:-internal-list-box) option {
/* min-size rules ensure that we meet accessibility guidelines for minimum target size.
* https://github.com/openui/open-ui/issues/1026
* https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
/* TODO(crbug.com/1511354): This might be able to be combined with the
* default select option rules at some point. This should be re-evaluted
* before StylableSelect is shipped. */
min-inline-size: 24px;
min-block-size: max(24px, 1.2em);
align-content: center;
}
/* TODO(crbug.com/1511354): Consider using ::marker or a whole new
* pseudo-element to implement this. */
select:not(:-internal-list-box) option::before {
content: '\2713' / '';
}
select option:not(:checked)::before {
visibility: hidden;
}
select:-internal-autofill-selected::select-fallback-button,
select::-internal-select-autofill-preview[popover] {
background-image: none;
background-color: light-dark(#E8F0FE, rgba(70, 90, 126, 0.4));
color: FieldText;
}
select::-internal-select-autofill-preview[popover]:popover-open {
display: grid;
align-items: center;
position-area: center;
height: calc(anchor-size(height) - 2px);
width: calc(anchor-size(width) - 2px);
margin: 0;
padding: 0;
border: 1px solid black;
}
select::-internal-select-autofill-preview-text {
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
white-space: nowrap;
}
/* TODO(crbug.com/1511354): select::select-fallback-button::after can't be
* targeted with author styles but it should be and I don't know why. */
select::select-fallback-button::after {
padding-inline-start: 0.5em;
}
select:open::select-fallback-button::after {
content: counter(fake-counter-name, disclosure-open);
}
select:not(:open)::select-fallback-button::after {
content: counter(fake-counter-name, disclosure-closed);
}
Codebase Browser
chromium