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

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

- Upload with drop area disabled

  `vaadin-upload[nodrop]`

- Upload with file dragged over

  `vaadin-upload[dragover]`

- Upload with file dragged over and validated

  `vaadin-upload[dragover-valid]`

### <a id="button-and-drop-label"></a>Button and Drop Label

- Button and drop label wrapper

  `vaadin-upload::part(primary-buttons)`

- Upload button

  `vaadin-upload > vaadin-button`

- Upload button text

  `vaadin-upload > vaadin-button::part(label)`

- Hovered button

  `vaadin-upload > vaadin-button:hover`

- Focused button

  `vaadin-upload > vaadin-button[focused]`

- Disabled button

  `vaadin-upload > vaadin-button[disabled]`

- Drop label

  `vaadin-upload::part(drop-label)`

- Drop label text

  `vaadin-upload > [slot="drop-label"]`

- Drop label icon wrapper

  `vaadin-upload > [slot="drop-label-icon"]`

- Drop label icon

  `vaadin-upload > [slot="drop-label-icon"]::before`

### <a id="file-list"></a>File List

- File list wrapper

  `vaadin-upload-file-list`

- File list

  `vaadin-upload-file-list::part(list)`

### <a id="file"></a>File

- File element

  `vaadin-upload-file`

- File content wrapper

  `vaadin-upload-file::part(row)`

- Status icons and meta info wrapper

  `vaadin-upload-file::part(info)`

- Meta information wrapper

  `vaadin-upload-file::part(meta)`

- File name

  `vaadin-upload-file::part(name)`

- Status text

  `vaadin-upload-file::part(status)`

- Error message

  `vaadin-upload-file::part(error)`

#### <a id="file-states"></a>File States

- Focused file

  `vaadin-upload-file[focused]`

- Hovered file

  `vaadin-upload-file:hover`

- File uploaded successfully

  `vaadin-upload-file[complete]`

- File that failed with an error

  `vaadin-upload-file[error]`

- File with upload in progress

  `vaadin-upload-file[uploading]`

- File with unknown remaining time estimate

  `vaadin-upload-file[indeterminate]`

- Icon: upload completed

  `vaadin-upload-file::part(done-icon)`

- Icon: upload failed

  `vaadin-upload-file::part(warning-icon)`

#### <a id="file-actions"></a>File Actions

- Actions wrapper

  `vaadin-upload-file::part(commands)`

- Start upload button

  `vaadin-upload-file::part(start-button)`

- Retry button

  `vaadin-upload-file::part(retry-button)`

- Remove button

  `vaadin-upload-file::part(remove-button)`

#### <a id="progress-bar"></a>Progress Bar

- Progress bar element

  `vaadin-upload-file > vaadin-progress-bar`

- Progress bar track

  `vaadin-upload-file > vaadin-progress-bar::part(bar)`

- Progress bar indicator

  `vaadin-upload-file > vaadin-progress-bar::part(value)`

- Indeterminate progress bar (unknown estimate)

  `vaadin-upload-file > vaadin-progress-bar[indeterminate]`