Single
The single select should be used when the user is selecting an option from a list of items. Although the presentation is similar to the basic dropdown, the underlying HTML and ARIA tag structure is specific to a select list. The selection will replace the default text in the toggle. The selection is highlighted with the list is opened. If the selection is cleared elsewhere (i.e. from the filter bar), the default text is restored.
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-select | <div> | Initiates a custom select. |
.pf-c-select__toggle | <button> | Initiates a custom toggle. |
.pf-c-select__toggle-wrapper | <div> | Initiates a custom select toggle wrapper. |
.pf-c-select__toggle-arrow | <span> | Initiates the caret to toggle the dropdown. |
.pf-c-select__menu | <ul> | Initiates the custom select dropdown menu. |
.pf-c-select__menu-item | <li> | Initiates the items in the custom select dropdown menu. |
.pf-c-select__menu-item-icon | <i> | Initiates the selected item icon. |
.pf-m-top | .pf-c-select | Modifies the select menu to display above the toggle. |
.pf-m-align-right | .pf-c-select__menu | Modifies the select menu to display right aligned to the toggle. |
.pf-m-active | .pf-c-select | Forces display of the active state of the toggle. |
States
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
aria-invalid="true" | .pf-c-select__toggle | Indicates that the select is in the invalid state. |
aria-selected="true" | .pf-c-select__menu-item | Should be set programmatically to indicate the active item. |
disabled | .pf-c-select__toggle | Disables the dropdown toggle and removes it from keyboard focus. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-select | <div> | Initiates the select component. |
.pf-c-select__toggle | <button> | Initiates the select toggle. |
.pf-c-select__toggle-wrapper | <div> | Initiates the select toggle wrapper. |
.pf-c-select__toggle-arrow | <span> | Initiates the caret to toggle the dropdown. |
.pf-c-select__menu | <ul> | Initiates the select dropdown menu. |
.pf-c-select__menu-item | <li> | Initiates the items in the select dropdown menu. |
.pf-c-select__menu-item-icon | <span> | Initiates the selected item icon wrapper. |
.pf-m-expanded | .pf-c-select | Indicates the select is expanded. |
.pf-m-success | .pf-c-select | Modifies select component for the success state. |
.pf-m-warning | .pf-c-select | Modifies select component for the warning state. |
.pf-m-invalid | .pf-c-select | Modifies select component for the invalid state. |
.pf-m-selected | .pf-c-select__menu-item | Indicates the menu item is selected. |
.pf-m-disabled | div.pf-c-select__toggle | Modifies to display the select toggle as disabled. This applies to div.pf-c-select__toggle and should not be used in lieu of the disabled attribute on button.pf-c-select__toggle. When this is used, disabled should also be added to any form elements in div.pf-c-select__toggle |
Typeahead
The single select typeahead should be used when the user is selecting one option from a list of items with the option to narrow the list by typing from the keyboard. Selected items are removed from the list. The user can clear the selection and restore the placeholder text.
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
aria-selected="true" | .pf-c-select__menu-item | Should be set programmatically to indicate the active item. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-select | <div> | Initiates the select component. |
.pf-c-select__toggle | <div> | Initiates the select toggle. |
.pf-c-select__toggle-wrapper | <div> | Initiates the select toggle wrapper. |
.pf-c-select__toggle-typeahead | input.pf-c-form-control | Initiates the input field for typeahead. |
.pf-c-select__toggle-clear | button.pf-c-button.pf-m-plain | Initiates a clear button in the toggle. |
.pf-c-select__toggle-button | button.pf-c-button.pf-m-plain | Initiates a toggle button. |
.pf-c-select__toggle-arrow | <span> | Initiates the caret icon. |
.pf-c-select__menu | <ul> | Initiates the select dropdown menu. |
.pf-c-select__menu-item | <li> | Initiates the items in the select dropdown menu. |
.pf-m-expanded | .pf-c-select | Indicates the select is expanded. |
.pf-m-typeahead | .pf-c-select__toggle | Indicates the select has a typeahead. |
.pf-m-focus | .pf-c-select__menu-item | Modifies the menu item to apply :focus styling. For use when navigating the menu items by keyboard when the typeahead input field has browser focus. |
Typeahead multiselect
The multiselect should be used when the user is selecting multiple items from a list. The user can narrow the list by typing from the keyboard. The List updates while typing. Selected items create a new chip and are removed from the list. The user may clear selections individually or all at once to restore the placeholder.
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
aria-selected="true" | .pf-c-select__menu-item | Should be set programmatically to indicate the active item. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-select | <div> | Initiates the select component. |
.pf-c-select__toggle | <div> | Initiates the select toggle. |
.pf-c-select__toggle-wrapper | <div> | Initiates the select toggle wrapper so that chips and input field can wrap together. |
.pf-c-chip | <div> | Initiates a chip. (See chip component for more details) |
.pf-c-select__toggle-typeahead | input.pf-c-form-control | Initiates the input field for typeahead. |
.pf-c-select__toggle-clear | button.pf-m-plain | Initiates a clear button in the toggle. |
.pf-c-select__toggle-button | <button> | Initiates a toggle button. |
.pf-c-select__toggle-arrow | <span> | Initiates the caret icon. |
.pf-c-select__menu | <ul> | Initiates the select dropdown menu. |
.pf-c-select__menu-item | <li> | Initiates the items in the select dropdown menu. |
.pf-m-expanded | .pf-c-select | Indicates the select is expanded. |
.pf-m-typeahead | .pf-c-select__toggle | Indicates the select has a typeahead. |
Checkbox
The checkbox select can select multiple items using checkboxes. The number of items selected is reflected in an optional badge in the dropdown toggle. The user may clear items by unchecking or using the clear button. Optionally, items may be grouped.
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-select | <div> | Initiates the select component. |
.pf-c-select__toggle | <button> | Initiates the select toggle. |
.pf-c-select__toggle-wrapper | <div> | Initiates the select toggle wrapper so that chips and input field can wrap together. |
.pf-c-chip | <div> | Initiates a chip. (See chip component for more details) |
.pf-c-select__toggle-typeahead | input.pf-c-form-control | Initiates the input field for typeahead. |
.pf-c-select__toggle-badge | <div> | Initiates a container for a badge to indicate the number of items checked. note: This should contain an unread badge |
.pf-c-select__toggle-clear | button.pf-m-plain | Initiates a clear button in the toggle. |
.pf-c-select__toggle-arrow | <span> | Initiates the caret to toggle the dropdown. |
.pf-c-select__menu | <div> | Initiates the select dropdown menu. |
.pf-c-select__menu-item | div.pf-c-check | Initiates the items in the select dropdown menu. |
.pf-c-select__menu-item-row | <span> | Initiates a menu item row for use with positioning other elements before/after the item text. |
.pf-c-select__menu-item-text | <span> | Initiates the menu item row text. |
.pf-c-select__menu-item-count | <span> | Initiates the menu item row count. |
.pf-c-select__menu-fieldset | <fieldset> | Initiates a fieldset for the items in a checkbox select. |
.pf-c-select__menu-group | <div> | Initiates a group within a select menu. |
.pf-c-select__menu-group-title | <div> | Initiates a title for a group with a select menu. |
.pf-c-select__menu-search | <div> | Initiates a container for the search input group. |
.pf-m-expanded | .pf-c-select | Indicates the select is expanded. |
.pf-m-typeahead | .pf-c-select__toggle | Indicates the select has a typeahead. |
Plain
The plain select variation should be used when you do not want a border applied to the select toggle.
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-select | <div> | Initiates the select component. |
.pf-c-select__toggle | <button> | Initiates the select toggle. |
.pf-c-select__toggle-wrapper | <div> | Initiates the select toggle wrapper. |
.pf-c-select__toggle-arrow | <span> | Initiates the caret to toggle the dropdown. |
.pf-c-select__menu | <ul> | Initiates the select dropdown menu. |
.pf-c-select__menu-item | <li> | Initiates the items in the select dropdown menu. |
.pf-c-select__menu-item-icon | <i> | Initiates the selected item icon. |
.pf-m-expanded | .pf-c-select | Indicates the select is expanded. |
.pf-m-plain | .pf-c-select__toggle | Modifies to display the toggle with no border. |
.pf-m-selected | .pf-c-select__menu-item | Indicates the menu item is selected. |
Icon
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
aria-hidden="true" | .pf-c-select__toggle-icon | Hides the icon from assistive technologies. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-select | <div> | Initiates the select component. |
.pf-c-select__toggle | <button> | Initiates the select toggle. |
.pf-c-select__toggle-wrapper | <div> | Initiates the select toggle wrapper. |
.pf-c-select__toggle-icon | <span> | Initiates the icon in the dropdown toggle. |
.pf-c-select__toggle-arrow | <span> | Initiates the caret to toggle the dropdown. |
Panel
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-select | <div> | Initiates the select component. |
.pf-c-select__toggle | <button> | Initiates the select toggle. |
.pf-c-select__toggle-wrapper | <div> | Initiates the select toggle wrapper. |
.pf-c-select__toggle-arrow | <span> | Initiates the caret to toggle the dropdown. |
.pf-c-select__menu | <div> | Initiates the select dropdown menu. |
Description
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-select__menu-item-description | <span> | Initiates the select menu item description element. |
.pf-c-select__menu-item-main | <span> | Initiates the select menu item main element. Used when the description element is present. |
.pf-m-description | .pf-c-select__menu-item | Modifies the select menu item when selected to accommodate the description element. |
Favorites
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
aria-label="Not starred" | .pf-c-select__menu-wrapper > .pf-c-select__menu-item.pf-m-action | Provides an accessible label indicating that the favorite action is not selected. |
aria-label="Starred" | .pf-c-select__menu-wrapper.pf-m-favorite > .pf-c-select__menu-item.pf-m-action | Provides an accessible label indicating that the favorite action is selected. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-select__menu-wrapper | <li> | Defines a menu wrapper for use with multiple actionable items in a single item row. |
.pf-m-favorite | .pf-c-select__menu-wrapper | Modifies wrapper to indicate that the item row has been favorited. |
.pf-m-favorite-action | .pf-c-select__menu-item | Modifies an item for favorite styles. |
.pf-m-link | .pf-c-select__menu-item.pf-m-wrapper > .pf-c-select__menu-item | Modifies item for link styles. |
.pf-m-action | .pf-c-select__menu-item.pf-m-wrapper > .pf-c-select__menu-item | Modifies item to for action styles. |
View more
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-m-load | .pf-c-select__menu-item | Modifies a menu item for load styles. |
Loading
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-select__list-item | <li> | Defines a list item element in the select menu. |
.pf-m-loading | .pf-c-select__list-item | Modifies a list item for loading styles. |
Footer
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-select__menu-footer | <div> | Defines a menu footer. |
.pf-c-select__menu-list | <ul> | Defines the menu list when the list is placed in div.pf-c-select__menu. |
Placeholder
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-m-placeholder | .pf-c-select__toggle | Modifies the toggle for placeholder styles. |
Documentation
Overview
There are 4 variants of the select component: single select, single select with typeahead, multiple select with typeahead, and a multiple checkbox select. See the examples for more details about each variation.
The single select should be used when the user is selecting an option from a list of items. Although the presentation is similar to the basic dropdown, the underlying HTML and ARIA tag structure is specific to a select list. The selection will replace the default text in the toggle. The selection is highlighted with the list is opened. If the selection is cleared elsewhere (i.e. from the filter bar), the default text is restored.
CSS variables
| .pf-c-select | --pf-global--Color--100 | #151515 | |
| .pf-c-select | --pf-global--Color--200 | #6a6e73 | |
| .pf-c-select | --pf-global--BorderColor--100 | #d2d2d2 | |
| .pf-c-select | --pf-global--primary-color--100 | #06c | |
| .pf-c-select | --pf-global--link--Color | #06c | |
| .pf-c-select | --pf-global--link--Color--hover | #004080 | |
| .pf-c-select | --pf-global--BackgroundColor--100 | #fff | |
| .pf-c-select | --pf-c-select__toggle--PaddingTop | 0.375rem | |
| .pf-c-select | --pf-c-select__toggle--PaddingRight | 0.5rem | |
| .pf-c-select | --pf-c-select__toggle--PaddingBottom | 0.375rem | |
| .pf-c-select | --pf-c-select__toggle--PaddingLeft | 0.5rem | |
| .pf-c-select | --pf-c-select__toggle--MinWidth | 44px | |
| .pf-c-select | --pf-c-select__toggle--FontSize | 1rem | |
| .pf-c-select | --pf-c-select__toggle--FontWeight | 400 | |
| .pf-c-select | --pf-c-select__toggle--LineHeight | 1.5 | |
| .pf-c-select | --pf-c-select__toggle--BackgroundColor | #fff | |
| .pf-c-select | --pf-c-select__toggle--before--BorderTopWidth | 1px | |
| .pf-c-select | --pf-c-select__toggle--before--BorderRightWidth | 1px | |
| .pf-c-select | --pf-c-select__toggle--before--BorderBottomWidth | 1px | |
| .pf-c-select | --pf-c-select__toggle--before--BorderLeftWidth | 1px | |
| .pf-c-select | --pf-c-select__toggle--before--BorderWidth | initial | |
| .pf-c-select | --pf-c-select__toggle--before--BorderTopColor | #f0f0f0 | |
| .pf-c-select | --pf-c-select__toggle--before--BorderRightColor | #f0f0f0 | |
| .pf-c-select | --pf-c-select__toggle--before--BorderBottomColor | #8a8d90 | |
| .pf-c-select | --pf-c-select__toggle--before--BorderLeftColor | #f0f0f0 | |
| .pf-c-select | --pf-c-select__toggle--Color | #151515 | |
| .pf-c-select | --pf-c-select__toggle--hover--before--BorderBottomColor | #06c | |
| .pf-c-select | --pf-c-select__toggle--focus--before--BorderBottomColor | #06c | |
| .pf-c-select | --pf-c-select__toggle--focus--before--BorderBottomWidth | 2px | |
| .pf-c-select | --pf-c-select__toggle--active--before--BorderBottomColor | #06c | |
| .pf-c-select | --pf-c-select__toggle--active--before--BorderBottomWidth | 2px | |
| .pf-c-select | --pf-c-select__toggle--m-expanded--before--BorderBottomColor | #06c | |
| .pf-c-select | --pf-c-select__toggle--m-expanded--before--BorderBottomWidth | 2px | |
| .pf-c-select | --pf-c-select__toggle--disabled--BackgroundColor | #f0f0f0 | |
| .pf-c-select | --pf-c-select__toggle--m-plain--before--BorderColor | transparent | |
| .pf-c-select | --pf-c-select__toggle--m-placeholder--Color | transparent | |
| .pf-c-select | --pf-c-select--m-invalid__toggle--before--BorderBottomColor | #c9190b | |
| .pf-c-select | --pf-c-select--m-invalid__toggle--before--BorderBottomWidth | 2px | |
| .pf-c-select | --pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor | #c9190b | |
| .pf-c-select | --pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor | #c9190b | |
| .pf-c-select | --pf-c-select--m-invalid__toggle--active--before--BorderBottomColor | #c9190b | |
| .pf-c-select | --pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor | #c9190b | |
| .pf-c-select | --pf-c-select--m-invalid__toggle-status-icon--Color | #c9190b | |
| .pf-c-select | --pf-c-select--m-success__toggle--before--BorderBottomColor | #3e8635 | |
| .pf-c-select | --pf-c-select--m-success__toggle--before--BorderBottomWidth | 2px | |
| .pf-c-select | --pf-c-select--m-success__toggle--hover--before--BorderBottomColor | #3e8635 | |
| .pf-c-select | --pf-c-select--m-success__toggle--focus--before--BorderBottomColor | #3e8635 | |
| .pf-c-select | --pf-c-select--m-success__toggle--active--before--BorderBottomColor | #3e8635 | |
| .pf-c-select | --pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor | #3e8635 | |
| .pf-c-select | --pf-c-select--m-success__toggle-status-icon--Color | #3e8635 | |
| .pf-c-select | --pf-c-select--m-warning__toggle--before--BorderBottomColor | #f0ab00 | |
| .pf-c-select | --pf-c-select--m-warning__toggle--before--BorderBottomWidth | 2px | |
| .pf-c-select | --pf-c-select--m-warning__toggle--hover--before--BorderBottomColor | #f0ab00 | |
| .pf-c-select | --pf-c-select--m-warning__toggle--focus--before--BorderBottomColor | #f0ab00 | |
| .pf-c-select | --pf-c-select--m-warning__toggle--active--before--BorderBottomColor | #f0ab00 | |
| .pf-c-select | --pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor | #f0ab00 | |
| .pf-c-select | --pf-c-select--m-warning__toggle-status-icon--Color | #f0ab00 | |
| .pf-c-select | --pf-c-select__toggle-wrapper--not-last-child--MarginRight | 0.25rem | |
| .pf-c-select | --pf-c-select__toggle-wrapper--MaxWidth | calc(100% - 1.5rem) | |
| .pf-c-select | --pf-c-select__toggle-wrapper--c-chip-group--MarginTop | 0.3125rem | |
| .pf-c-select | --pf-c-select__toggle-wrapper--c-chip-group--MarginBottom | 0.3125rem | |
| .pf-c-select | --pf-c-select__toggle-typeahead--FlexBasis | 10em | |
| .pf-c-select | --pf-c-select__toggle-typeahead--BackgroundColor | transparent | |
| .pf-c-select | --pf-c-select__toggle-typeahead--BorderTop | 1px solid transparent | |
| .pf-c-select | --pf-c-select__toggle-typeahead--BorderRight | none | |
| .pf-c-select | --pf-c-select__toggle-typeahead--BorderLeft | none | |
| .pf-c-select | --pf-c-select__toggle-typeahead--MinWidth | 7.5rem | |
| .pf-c-select | --pf-c-select__toggle-typeahead--focus--PaddingBottom | calc(0.375rem - 2px) | |
| .pf-c-select | --pf-c-select__toggle--m-placeholder__toggle-text--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__toggle-icon--toggle-text--MarginLeft | 0.25rem | |
| .pf-c-select | --pf-c-select__toggle-badge--PaddingLeft | 0.5rem | |
| .pf-c-select | --pf-c-select__toggle-status-icon--MarginLeft | 0.25rem | |
| .pf-c-select | --pf-c-select__toggle-status-icon--Color | #151515 | |
| .pf-c-select | --pf-c-select__toggle-arrow--MarginLeft | 1rem | |
| .pf-c-select | --pf-c-select__toggle-arrow--MarginRight | 0.5rem | |
| .pf-c-select | --pf-c-select__toggle-arrow--with-clear--MarginLeft | 0.5rem | |
| .pf-c-select | --pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate | 180deg | |
| .pf-c-select | --pf-c-select--m-plain__toggle-arrow--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select--m-plain--hover__toggle-arrow--Color | #151515 | |
| .pf-c-select | --pf-c-select__toggle-clear--PaddingRight | 0.5rem | |
| .pf-c-select | --pf-c-select__toggle-clear--PaddingLeft | 1rem | |
| .pf-c-select | --pf-c-select__toggle-clear--toggle-button--PaddingLeft | 0.5rem | |
| .pf-c-select | --pf-c-select__toggle-button--Color | #151515 | |
| .pf-c-select | --pf-c-select__menu--BackgroundColor | #fff | |
| .pf-c-select | --pf-c-select__menu--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | |
| .pf-c-select | --pf-c-select__menu--PaddingTop | 0.5rem | |
| .pf-c-select | --pf-c-select__menu--PaddingBottom | 0.5rem | |
| .pf-c-select | --pf-c-select__menu--Top | calc(100% + 0.25rem) | |
| .pf-c-select | --pf-c-select__menu--ZIndex | 200 | |
| .pf-c-select | --pf-c-select__menu--Width | auto | |
| .pf-c-select | --pf-c-select__menu--MinWidth | 100% | |
| .pf-c-select | --pf-c-select__menu--m-top--TranslateY | calc(-100% - 0.25rem) | |
| .pf-c-select | --pf-c-select__list-item--m-loading--PaddingTop | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-item--PaddingTop | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-item--PaddingRight | 1rem | |
| .pf-c-select | --pf-c-select__menu-item--m-selected--PaddingRight | 3rem | |
| .pf-c-select | --pf-c-select__menu-item--PaddingBottom | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-item--PaddingLeft | 1rem | |
| .pf-c-select | --pf-c-select__menu-item--FontSize | 1rem | |
| .pf-c-select | --pf-c-select__menu-item--FontWeight | 400 | |
| .pf-c-select | --pf-c-select__menu-item--LineHeight | 1.5 | |
| .pf-c-select | --pf-c-select__menu-item--Color | #151515 | |
| .pf-c-select | --pf-c-select__menu-item--disabled--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item--Width | 100% | |
| .pf-c-select | --pf-c-select__menu-item--hover--BackgroundColor | #f0f0f0 | |
| .pf-c-select | --pf-c-select__menu-item--focus--BackgroundColor | #f0f0f0 | |
| .pf-c-select | --pf-c-select__menu-item--disabled--BackgroundColor | transparent | |
| .pf-c-select | --pf-c-select__menu-item--m-link--Width | auto | |
| .pf-c-select | --pf-c-select__menu-item--m-link--hover--BackgroundColor | transparent | |
| .pf-c-select | --pf-c-select__menu-item--m-link--focus--BackgroundColor | transparent | |
| .pf-c-select | --pf-c-select__menu-item--m-action--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item--m-action--hover--Color | #151515 | |
| .pf-c-select | --pf-c-select__menu-item--m-action--focus--Color | #151515 | |
| .pf-c-select | --pf-c-select__menu-item--m-action--disabled--Color | #d2d2d2 | |
| .pf-c-select | --pf-c-select__menu-item--m-action--Width | auto | |
| .pf-c-select | --pf-c-select__menu-item--m-action--FontSize | 0.625rem | |
| .pf-c-select | --pf-c-select__menu-item--m-action--hover--BackgroundColor | transparent | |
| .pf-c-select | --pf-c-select__menu-item--m-action--focus--BackgroundColor | transparent | |
| .pf-c-select | --pf-c-select__menu-item--hover__menu-item--m-action--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item--m-favorite-action--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item--m-favorite-action--hover--Color | #151515 | |
| .pf-c-select | --pf-c-select__menu-item--m-favorite-action--focus--Color | #151515 | |
| .pf-c-select | --pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color | #f0ab00 | |
| .pf-c-select | --pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color | #c58c00 | |
| .pf-c-select | --pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color | #c58c00 | |
| .pf-c-select | --pf-c-select__menu-item--m-load--Color | #06c | |
| .pf-c-select | --pf-c-select__menu-item-icon--Color | #06c | |
| .pf-c-select | --pf-c-select__menu-item-icon--FontSize | 0.625rem | |
| .pf-c-select | --pf-c-select__menu-item-icon--Right | 1rem | |
| .pf-c-select | --pf-c-select__menu-item-icon--Top | 50% | |
| .pf-c-select | --pf-c-select__menu-item-icon--TranslateY | -50% | |
| .pf-c-select | --pf-c-select__menu-item-action-icon--MinHeight | calc(1rem * 1.5) | |
| .pf-c-select | --pf-c-select__menu-item--match--FontWeight | 700 | |
| .pf-c-select | --pf-c-select__menu-search--PaddingTop | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-search--PaddingRight | 1rem | |
| .pf-c-select | --pf-c-select__menu-search--PaddingBottom | 1rem | |
| .pf-c-select | --pf-c-select__menu-search--PaddingLeft | 1rem | |
| .pf-c-select | --pf-c-select__menu-group--menu-group--PaddingTop | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-group-title--PaddingTop | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-group-title--PaddingRight | 1rem | |
| .pf-c-select | --pf-c-select__menu-group-title--PaddingBottom | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-group-title--PaddingLeft | 1rem | |
| .pf-c-select | --pf-c-select__menu-group-title--FontSize | 0.875rem | |
| .pf-c-select | --pf-c-select__menu-group-title--FontWeight | 700 | |
| .pf-c-select | --pf-c-select__menu-group-title--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item-count--MarginLeft | 1rem | |
| .pf-c-select | --pf-c-select__menu-item-count--FontSize | 0.875rem | |
| .pf-c-select | --pf-c-select__menu-item-count--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item--disabled__menu-item-count--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item-description--FontSize | 0.75rem | |
| .pf-c-select | --pf-c-select__menu-item-description--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item-description--PaddingRight | 1rem | |
| .pf-c-select | --pf-c-select__menu-item-main--PaddingRight | 1rem | |
| .pf-c-select | --pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight | 3rem | |
| .pf-c-select | --pf-c-select__menu-footer--BoxShadow | 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | |
| .pf-c-select | --pf-c-select__menu-footer--PaddingTop | 1rem | |
| .pf-c-select | --pf-c-select__menu-footer--PaddingRight | 1rem | |
| .pf-c-select | --pf-c-select__menu-footer--PaddingBottom | 1rem | |
| .pf-c-select | --pf-c-select__menu-footer--PaddingLeft | 1rem | |
| .pf-c-select | --pf-c-select__menu-footer--MarginTop | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-footer--MarginBottom | calc(0.5rem * -1) | |
| .pf-c-select | --pf-c-select-menu--c-divider--MarginTop | 0.5rem | |
| .pf-c-select | --pf-c-select-menu--c-divider--MarginBottom | 0.5rem | |
| .pf-c-select .pf-c-divider:last-child | --pf-c-select-menu--c-divider--MarginBottom | 0 | |
| .pf-c-select.pf-m-invalid | --pf-c-select__toggle--before--BorderBottomColor | #c9190b | |
| .pf-c-select.pf-m-invalid | --pf-c-select__toggle--before--BorderBottomWidth | 2px | |
| .pf-c-select.pf-m-invalid | --pf-c-select__toggle--hover--before--BorderBottomColor | #c9190b | |
| .pf-c-select.pf-m-invalid | --pf-c-select__toggle--focus--before--BorderBottomColor | #c9190b | |
| .pf-c-select.pf-m-invalid | --pf-c-select__toggle--active--before--BorderBottomColor | #c9190b | |
| .pf-c-select.pf-m-invalid | --pf-c-select__toggle--m-expanded--before--BorderBottomColor | #c9190b | |
| .pf-c-select.pf-m-invalid | --pf-c-select__toggle-status-icon--Color | #c9190b | |
| .pf-c-select.pf-m-success | --pf-c-select__toggle--before--BorderBottomColor | #3e8635 | |
| .pf-c-select.pf-m-success | --pf-c-select__toggle--before--BorderBottomWidth | 2px | |
| .pf-c-select.pf-m-success | --pf-c-select__toggle--hover--before--BorderBottomColor | #3e8635 | |
| .pf-c-select.pf-m-success | --pf-c-select__toggle--focus--before--BorderBottomColor | #3e8635 | |
| .pf-c-select.pf-m-success | --pf-c-select__toggle--active--before--BorderBottomColor | #3e8635 | |
| .pf-c-select.pf-m-success | --pf-c-select__toggle--m-expanded--before--BorderBottomColor | #3e8635 | |
| .pf-c-select.pf-m-success | --pf-c-select__toggle-status-icon--Color | #3e8635 | |
| .pf-c-select.pf-m-warning | --pf-c-select__toggle--before--BorderBottomColor | #f0ab00 | |
| .pf-c-select.pf-m-warning | --pf-c-select__toggle--before--BorderBottomWidth | 2px | |
| .pf-c-select.pf-m-warning | --pf-c-select__toggle--hover--before--BorderBottomColor | #f0ab00 | |
| .pf-c-select.pf-m-warning | --pf-c-select__toggle--focus--before--BorderBottomColor | #f0ab00 | |
| .pf-c-select.pf-m-warning | --pf-c-select__toggle--active--before--BorderBottomColor | #f0ab00 | |
| .pf-c-select.pf-m-warning | --pf-c-select__toggle--m-expanded--before--BorderBottomColor | #f0ab00 | |
| .pf-c-select.pf-m-warning | --pf-c-select__toggle-status-icon--Color | #f0ab00 | |
| .pf-c-select__menu-search + .pf-c-divider | --pf-c-select-menu--c-divider--MarginTop | 0 | |
| .pf-c-select__toggle.pf-m-disabled | --pf-c-select__toggle--BackgroundColor | #f0f0f0 | |
| .pf-c-select__toggle::before | --pf-c-select__toggle--before--BorderWidth-base | 1px 1px 1px 1px | |
| .pf-c-select__toggle:hover | --pf-c-select__toggle--before--BorderBottomColor | #06c | |
| .pf-c-select__toggle:focus | --pf-c-select__toggle--before--BorderBottomColor | #06c | |
| .pf-c-select__toggle:focus | --pf-c-select__toggle--before--BorderBottomWidth | 2px | |
| .pf-c-select__toggle:active | --pf-c-select__toggle--before--BorderBottomColor | #06c | |
| .pf-c-select__toggle:active | --pf-c-select__toggle--before--BorderBottomWidth | 2px | |
| .pf-m-expanded > .pf-c-select__toggle | --pf-c-select__toggle--before--BorderBottomColor | #06c | |
| .pf-m-expanded > .pf-c-select__toggle | --pf-c-select__toggle--before--BorderBottomWidth | 2px | |
| .pf-c-select__toggle.pf-m-plain | --pf-c-select__toggle-arrow--Color | #6a6e73 | |
| .pf-c-select__toggle.pf-m-plain:hover | --pf-c-select--m-plain__toggle-arrow--Color | #151515 | |
| .pf-c-select__toggle.pf-m-typeahead | --pf-c-select__toggle--PaddingTop | 0 | |
| .pf-c-select__toggle.pf-m-typeahead | --pf-c-select__toggle--PaddingRight | 0 | |
| .pf-c-select__toggle.pf-m-typeahead | --pf-c-select__toggle--PaddingBottom | 0 | |
| .pf-c-select__toggle.pf-m-typeahead .pf-c-form-control | --pf-c-form-control--invalid--BackgroundUrl | none | |
| .pf-c-select__toggle.pf-m-placeholder | --pf-c-select__toggle-text--Color | #6a6e73 | |
| .pf-c-select__menu-wrapper.pf-m-favorite .pf-c-select__menu-item.pf-m-favorite-action | --pf-c-select__menu-item--m-favorite-action--Color | #f0ab00 | |
| .pf-c-select__menu-wrapper.pf-m-favorite .pf-c-select__menu-item.pf-m-favorite-action | --pf-c-select__menu-item--m-favorite-action--hover--Color | #c58c00 | |
| .pf-c-select__menu-wrapper.pf-m-favorite .pf-c-select__menu-item.pf-m-favorite-action | --pf-c-select__menu-item--m-favorite-action--focus--Color | #c58c00 | |
| .pf-c-select__menu-item:hover | --pf-c-select__menu-item--m-action--Color | #6a6e73 | |
| .pf-c-select__menu-item.pf-m-link | --pf-c-select__menu-item--PaddingRight | 0 | |
| .pf-c-select__menu-item.pf-m-link | --pf-c-select__menu-item-main--PaddingRight | 0 | |
| .pf-c-select__menu-item.pf-m-link | --pf-c-select__menu-item-description--PaddingRight | 0 | |
| .pf-c-select__menu-item.pf-m-link | --pf-c-select__menu-item--Width | auto | |
| .pf-c-select__menu-item.pf-m-link | --pf-c-select__menu-item--hover--BackgroundColor | transparent | |
| .pf-c-select__menu-item.pf-m-link | --pf-c-select__menu-item--focus--BackgroundColor | transparent | |
| .pf-c-select__menu-item.pf-m-action | --pf-c-select__menu-item--Color | #6a6e73 | |
| .pf-c-select__menu-item.pf-m-action | --pf-c-select__menu-item--Width | auto | |
| .pf-c-select__menu-item.pf-m-action | --pf-c-select__menu-item--hover--BackgroundColor | transparent | |
| .pf-c-select__menu-item.pf-m-action | --pf-c-select__menu-item--focus--BackgroundColor | transparent | |
| .pf-c-select__menu-item.pf-m-action:hover | --pf-c-select__menu-item--m-action--Color | #151515 | |
| .pf-c-select__menu-item.pf-m-action:focus | --pf-c-select__menu-item--m-action--Color | #151515 | |
| .pf-c-select__menu-item.pf-m-action:disabled | --pf-c-select__menu-item--disabled--Color | #d2d2d2 | |
| .pf-c-select__menu-item.pf-m-favorite-action | --pf-c-select__menu-item--m-action--Color | #6a6e73 | |
| .pf-c-select__menu-item.pf-m-favorite-action | --pf-c-select__menu-item--m-action--hover--Color | #151515 | |
| .pf-c-select__menu-item.pf-m-favorite-action | --pf-c-select__menu-item--m-action--focus--Color | #151515 | |
| .pf-c-select__menu-item.pf-m-selected | --pf-c-select__menu-item--PaddingRight | 3rem | |
| .pf-c-select__menu-item.pf-m-selected | --pf-c-select__menu-item-main--PaddingRight | 3rem | |
| .pf-c-select__menu-item.pf-m-description:not(.pf-c-check) | --pf-c-select__menu-item--PaddingRight | 0 | |
| .pf-c-select__menu-wrapper.pf-m-disabled | --pf-c-select__menu-item-count--Color | #6a6e73 | |
| .pf-c-select__menu-item.pf-m-load | --pf-c-select__menu-item--hover--BackgroundColor | transparent | |
| .pf-c-select__menu-item.pf-m-load | --pf-c-select__menu-item--focus--BackgroundColor | transparent | |
| .pf-c-select__menu-item.pf-m-load | --pf-c-select__menu-item--Color | #06c | |
View source on GitHub
