MNotes/components-wiki/figures/select/theming-outlined.html

35 lines
1.1 KiB
HTML
Raw Normal View History

<div class="figure-wrapper">
<figure
class="styled-example outlined"
title="Outlined select theming example"
aria-label="Image of an outlined select with a different theme applied"
>
<style>
.figure-wrapper figure {
padding-block: 16px;
}
.styled-example {
background-color: #f4fbfa;
}
.styled-example.outlined {
--md-outlined-select-text-field-outline-color: #6e7979;
--md-outlined-select-text-field-container-shape: 0px;
--md-outlined-select-text-field-input-text-color: #005353;
--md-outlined-select-text-field-input-text-font: system-ui;
}
.styled-example.outlined md-outlined-select::part(menu) {
--md-menu-container-color: #f4fbfa;
--md-menu-container-shape: 0px;
}
</style>
<md-outlined-select>
<md-select-option selected value="apple">
<div slot="headline">Apple</div>
</md-select-option>
<md-select-option value="tomato">
<div slot="headline">Tomato</div>
</md-select-option>
</md-outlined-select>
</figure>
</div>