> Markdown version of [Styling](https://vaadin.com/docs/v24/components/list-box/styling). Section index: [llms.txt](https://vaadin.com/docs/v24/components/llms.txt)

# Styling

## <a id="css-selectors"></a>CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the [Styling documentation](https://vaadin.com/docs/v24/styling.md) for more details on how to style components.

- Root element

  `vaadin-list-box`

### <a id="list-box"></a>List Box

- Multi-select

  `vaadin-list-box[multiple]`

- Hovered

  `vaadin-list-box:hover`

- Item layout / scroller

  `vaadin-list-box::part(items)`

### <a id="items"></a>Items

- Item element

  `vaadin-item`

- Label (plaintext content)

  `vaadin-item > span`

- Selection indicator

  `vaadin-item::part(checkmark)`

- Selection indicator icon

  `vaadin-item::part(checkmark)::before`

- Divider

  `vaadin-list-box > hr`

#### <a id="item-states"></a>Item States

- Selected item

  `vaadin-item[selected]`

- Content wrapper

  `vaadin-item::part(content)`

- Focused

  `vaadin-item[focused]`

- Keyboard focused

  `vaadin-item[focus-ring]`

- Hovered

  `vaadin-item:hover`

- Pressed

  `vaadin-item[active]`

- Disabled

  `vaadin-item[disabled]`