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

- Login form root component

  `vaadin-login-form`

- Login form

  `vaadin-login-form-wrapper`

### <a id="parts"></a>Parts

- Inner form wrapper

  `vaadin-login-form-wrapper::part(form)`

- Form title

  `vaadin-login-form-wrapper::part(form-title)`

- Error message section

  `vaadin-login-form-wrapper::part(error-message)`

- Error message heading

  `vaadin-login-form-wrapper::part(error-message-title)`

- Error message description

  `vaadin-login-form-wrapper::part(error-message-description)`

- Footer

  `vaadin-login-form-wrapper::part(footer)`

### <a id="login-overlay"></a>Login Overlay

- Overlay element

  `vaadin-login-overlay-wrapper`

- Overlay backdrop / modality curtain

  `vaadin-login-overlay-wrapper::part(backdrop)`

- Outer content wrapper

  `vaadin-login-overlay-wrapper::part(overlay)`

- Inner content wrapper

  `vaadin-login-overlay-wrapper::part(content)`

- Overlay card

  `vaadin-login-overlay-wrapper::part(card)`

- Card header

  `vaadin-login-overlay-wrapper::part(brand)`

- Title

  `vaadin-login-overlay-wrapper::part(title)`

- Description / sub-title

  `vaadin-login-overlay-wrapper::part(description)`

- Login form component in overlay

  `vaadin-login-overlay-wrapper > vaadin-login-form`

### <a id="fields-and-buttons"></a>Fields and Buttons

- Username field

  `vaadin-login-form-wrapper vaadin-text-field`

- Password field

  `vaadin-login-form-wrapper vaadin-password-field`

- Log In button

  `vaadin-login-form vaadin-button[theme~="submit"]`

- Forgot Password button

  `vaadin-login-form [slot="forgot-password"]`