diff --git a/research/src/pages/prototypes/selectmenu.mdx b/research/src/pages/prototypes/selectmenu.mdx index a1a1fc274..4111965f9 100644 --- a/research/src/pages/prototypes/selectmenu.mdx +++ b/research/src/pages/prototypes/selectmenu.mdx @@ -4,6 +4,8 @@ path: /prototypes/selectmenu menu: Prototypes --- +import SelectAnatomy from '../../components/select-anatomy' + # selectmenu Based on the [select](../components/select) proposal, the implementation of a new `` control has started in [Chromium](https://chromestatus.com/feature/5737365999976448). @@ -19,18 +21,18 @@ If you encouter bugs or limitations with the design of the control, please send Because the various parts of the selectmenu can be styled, it's important to understand the anatomy of this UI control. -- selectmenu - - button - - selected-value - - listbox - - opt-group (optional) - - option + -## Default behavior +- `` control. +## Default behavior -You can use it just like a native `` control. You can use it just like a native ``, with the following markup: ``` -When doing so, the default button, select-value, and listbox will be created for you. +When doing so, the default button, select-value, and listbox are created for you. ## Styling parts of the control @@ -61,6 +63,8 @@ One way to style the control to match your requirements is to use the CSS `::par } ``` +`::part()` can be used to style the `button`, `selected-value`, and `listbox` parts of the control. + ## Use your own markup To further customize the control to fit your needs, you can provide your own markup to replace the default one, as well as extend the existing parts.