Documentation

Documentation versions (currently viewingVaadin 24)

Message Input

Styling API reference for the Message Input component.

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 for more details on how to style components.

Root element

vaadin-message-input

Disabled

vaadin-message-input[disabled]

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]

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