> Markdown version of [Styling](https://vaadin.com/docs/v24/components/message-input/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-message-input`

- Disabled

  `vaadin-message-input[disabled]`

### <a id="field"></a>Field

- Input field wrapper

  `vaadin-message-input > vaadin-text-area`

- Input field

  `vaadin-message-input > vaadin-text-area::part(input-field)`

- Hovered input field

  `vaadin-message-input > vaadin-text-area:hover`

- Focused input field

  `vaadin-message-input > vaadin-text-area[focused]`

- Non-empty input field

  `vaadin-message-input > vaadin-text-area[has-value]`

### <a id="button"></a>Button

- Send button

  `vaadin-message-input > vaadin-button`

- Send button text

  `vaadin-message-input > vaadin-button::part(label)`

- Hovered button

  `vaadin-message-input > vaadin-button:hover`

- Focused button

  `vaadin-message-input > vaadin-button[focused]`

- Button for non-empty field

  `vaadin-message-input > vaadin-text-area[has-value] ~ vaadin-button`