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

### <a id="states"></a>States

- Required

  `vaadin-date-time-picker[required]`

- Focused

  `vaadin-date-time-picker[focused]`

- Keyboard focused

  `vaadin-date-time-picker[focus-ring]`

- Read-only

  `vaadin-date-time-picker[readonly]`

- Disabled

  `vaadin-date-time-picker[disabled]`

- Not empty

  `vaadin-date-time-picker[has-value]`

- Hovered

  `vaadin-date-time-picker:hover`

### <a id="sub-fields"></a>Sub-Fields

- Date Picker

  `vaadin-date-time-picker > vaadin-date-picker`

- Time Picker

  `vaadin-date-time-picker > vaadin-time-picker`

*See [Date Picker](https://vaadin.com/docs/v24/components/date-picker/styling.md) and [Time Picker](https://vaadin.com/docs/v24/components/time-picker/styling.md) selectors for details*

### <a id="label"></a>Label

- Field with label

  `vaadin-date-time-picker[has-label]`

- Label

  `vaadin-date-time-picker::part(label)`

- Label text

  `vaadin-date-time-picker > label`

- Required indicator

  `vaadin-date-time-picker::part(required-indicator)`

### <a id="helper-and-validation-error"></a>Helper and Validation Error

- Field with helper

  `vaadin-date-time-picker[has-helper]`

- Helper

  `vaadin-date-time-picker::part(helper-text)`

- Helper text

  `vaadin-date-time-picker > [slot="helper"]`

- Invalid field

  `vaadin-date-time-picker[invalid]`

- Field with error message

  `vaadin-date-time-picker[has-error-message]`

- Error message

  `vaadin-date-time-picker::part(error-message)`

- Error message text

  `vaadin-date-time-picker > [slot="error-message"]`