mirror of
https://github.com/material-components/material-web.git
synced 2026-03-09 00:09:23 +08:00
35 lines
1.1 KiB
HTML
35 lines
1.1 KiB
HTML
<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>
|