Filestack CSS Class Reference

This document provides a comprehensive list of CSS classes used in Filestack JS version 4.0.2 that you can override to customize the look and feel of the file picker.

Main Container Classes

`.fsp-picker`

The main picker container. This is the root element that wraps the entire picker interface. **Example:**

.fsp-picker {
    background: rgba(0, 0, 0, 0.288) !important;
    font-family: 'Arial', sans-serif;
}

`.fsp-picker--inline`

Applied when the picker is displayed in inline mode.

`.fsp-picker--no-scroll`

Applied to prevent body scrolling when picker is open.

`.fsp-picker-holder`

The main content holder within the picker.

`.fsp-picker-appear, .fsp-picker-appear-active, .fsp-picker-appear-to`

Animation classes for picker appearance transitions.

`.fsp-modal`

The modal container that wraps the picker content. **Example:**

.fsp-picker .fsp-modal {
    background: #fff;
    border-radius: 0;
    border: none;
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 
                0 24px 38px 3px rgba(0, 0, 0, 0.14), 
                0 9px 46px 8px rgba(0, 0, 0, 0.12);
}

`.fsp-modal-backdrop`

The modal backdrop/overlay element.

`.fsp-modal-dialog`

The modal dialog container.

`.fsp-modal-content`

The modal content wrapper.

`.fsp-modal-header`

The modal header section.

`.fsp-modal-footer`

The modal footer section.

`.fsp-modal__body`

The modal body content area.

`.fsp-modal__body--full-width`

Applied when modal body should take full width.

`.fsp-modal__body--sidebar-disabled`

Applied when sidebar is disabled.

`.fsp-modal__body--transformer`

Applied when in transformer/editor mode.

`.fsp-modal__sidebar`

The sidebar container.

`.fsp-modal__sidebar--mobile`

Mobile-specific sidebar styling.

`.fsp-page`

Page container element.

`.fsp-page-inner`

Inner page content wrapper.

`.fsp-panel`

Panel container element.

`.fsp-panel-body`

Panel body content area.

`.fsp-panel-title`

Panel title element.

`.fsp-wrapper`

General wrapper container.

`.fsp-row`

Row container for grid layouts.

`.fsp-col`

Column container for grid layouts.

Header and Navigation Classes

`.fsp-header`

The main header container. **Example:**

.fsp-picker .fsp-header {
    color: rgba(0, 0, 0, 0.54);
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

`.fsp-header--hide`

Applied when header should be hidden.

`.fsp-header-icon`

Header icon styling.

`.fsp-header-text`

Header text styling.

`.fsp-header-text--visible`

Applied when header text should be visible.

`.fsp-navbar`

Navigation bar container.

`.fsp-nav`

Navigation container.

`.fsp-nav-tabs`

Navigation tabs container.

`.fsp-nav-item`

Individual navigation item.

`.fsp-toolbar`

Toolbar container.

`.fsp-menu`

Menu container.

`.fsp-breadcrumb`

Breadcrumb navigation container.

`.fsp-breadcrumb-item`

Individual breadcrumb item.

`.fsp-breadcrumb-separator`

Breadcrumb separator element.

`.fsp-title`

Title element.

`.fsp-lbl`

Label element.

`.fsp-content`

Main content area.

`.fsp-content--new-transformer`

Applied when using new transformer UI.

`.fsp-content--selected-items`

Applied when showing selected items.

`.fsp-content--transformer`

Applied when in transformer mode.

`.fsp-content-scroll`

Content with scroll functionality.

`.fsp-content-with-tab`

Content with tab navigation.

`.fsp-body`

Main body content area.

`.fsp-gallery`

Gallery container.

`.fsp-list`

List container.

`.fsp-list-wrapper`

List wrapper container.

`.fsp-list-item`

Individual list item.

`.fsp-tab-panel`

Tab panel container.

Button Classes

`.fsp-button`

Base button styling. **Example:**

.fsp-button {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

`.fsp-btn`

Alternative button class (legacy).

`.fsp-button--active`

Applied to active/selected buttons.

`.fsp-button--auth`

Authentication button styling.

`.fsp-button--authgoogle`

Google authentication button.

`.fsp-button--cancel`

Cancel button styling.

`.fsp-button--cancel-disabled`

Disabled cancel button.

`.fsp-button--disabled`

Disabled button state.

`.fsp-button--outline`

Outline button variant.

`.fsp-button--primary`

Primary action button.

`.fsp-button--video`

Video-related button.

`.fsp-button--webcam`

Webcam button styling.

`.fsp-button-round-30`

Round button with 30px dimensions.

`.fsp-button-upload`

Upload button styling.

Grid and File Display Classes

`.fsp-grid`

File grid container.

`.fsp-grid-item`

Individual grid item (alternative to grid__cell).

`.fsp-grid__cell`

Individual grid cell.

`.fsp-grid__cell--dark`

Dark variant of grid cell.

`.fsp-grid__cell--selected`

Selected grid cell.

`.fsp-grid__cell--thumbnail`

Thumbnail grid cell.

`.fsp-grid__icon`

Grid icon styling.

`.fsp-grid__icon--selected`

Selected grid icon.

`.fsp-grid__icon-arrow`

Arrow icon in grid.

`.fsp-grid__icon-audio`

Audio file icon.

`.fsp-grid__icon-file`

Generic file icon.

`.fsp-grid__icon-folder`

Folder icon.

`.fsp-grid__icon-folder-add`

Add folder icon.

`.fsp-grid__icon-folder-grey`

Grey folder icon.

`.fsp-grid__icon-image`

Image file icon.

`.fsp-grid__icon-pdf`

PDF file icon.

`.fsp-grid__icon-zip`

ZIP file icon.

`.fsp-grid__label`

Grid label styling.

`.fsp-grid__text`

Grid text styling.

`.fsp-grid__text--selected`

Selected grid text.

`.fsp-grid__thumbnail`

Grid thumbnail styling.

`.fsp-grid__unsplash_meta`

Unsplash metadata in grid.

`.fsp-grid_mobile`

Mobile grid variant.

`.fsp-grid_provider_`

Provider-specific grid styling.

`.fsp-file`

File item container.

`.fsp-file--selected`

Selected file item.

`.fsp-file-selector`

File selector container.

`.fsp-folder`

Folder item container.

`.fsp-folder--selected`

Selected folder item.

`.fsp-preview`

File preview container.

`.fsp-preview-container`

Preview container wrapper.

`.fsp-image`

Image element.

`.fsp-thumbnail`

Thumbnail element.

`.fsp-thumbnails`

Thumbnails container.

Summary and Upload Classes

`.fsp-summary`

Summary view container.

`.fsp-summary__action`

Summary action button.

`.fsp-summary__action--button`

Button-style action.

`.fsp-summary__action--button-blue`

Blue button action.

`.fsp-summary__action--pause`

Pause action.

`.fsp-summary__action--play`

Play action.

`.fsp-summary__action--remove`

Remove action.

`.fsp-summary__action-separator`

Action separator.

`.fsp-summary__actions-container`

Actions container.

`.fsp-summary__alttext`

Alt text editing area.

`.fsp-summary__apply-icon`

Apply icon.

`.fsp-summary__body`

Summary body content.

`.fsp-summary__cancel-icon`

Cancel icon.

`.fsp-summary__edit-icon`

Edit icon.

`.fsp-summary__empty-state`

Empty state styling.

`.fsp-summary__filter`

Filter input.

`.fsp-summary__filter-icon`

Filter icon.

`.fsp-summary__go-back`

Go back button.

`.fsp-summary__has-actions`

Container with actions.

`.fsp-summary__header`

Summary header.

`.fsp-summary__item`

Summary item.

`.fsp-summary__item-name`

Item name styling.

`.fsp-summary__pagination`

Pagination container.

`.fsp-summary__pagination-button`

Pagination button.

`.fsp-summary__pagination-current`

Current page indicator.

`.fsp-summary__pagination-gap`

Pagination gap.

`.fsp-summary__pagination-label`

Pagination label.

`.fsp-summary__pagination-next`

Next page button.

`.fsp-summary__pagination-previous`

Previous page button.

`.fsp-summary__progress-bar`

Progress bar in summary.

`.fsp-summary__progress-bar-no-pause`

Progress bar without pause.

`.fsp-summary__size`

File size display.

`.fsp-summary__size--uploading`

Uploading size indicator.

`.fsp-summary__size-progress`

Size progress indicator.

`.fsp-summary__status-nav`

Status navigation.

`.fsp-summary__thumbnail`

Summary thumbnail.

`.fsp-summary__thumbnail-container`

Thumbnail container.

`.fsp-summary__try-again`

Try again button.

Drop Zone Classes

`.fsp-drop-area`

Drop area container. **Example:**

.fsp-picker .fsp-drop-area {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 0;
    border: 2px dashed #ccc;
    padding: 40px;
    text-align: center;
}

`.fsp-dropzone`

Alternative drop zone class (legacy).

`.fsp-drop-area__button`

Drop area button.

`.fsp-drop-area__separator`

Drop area separator.

`.fsp-drop-area__subtitle`

Drop area subtitle.

`.fsp-drop-area__title`

Drop area title.

`.fsp-drop-area-container`

Drop area container wrapper.

`.fsp-drop-pane__container`

Drop pane container.

`.fsp-drop-pane__container--active`

Active drop pane.

`.fsp-drop-pane__drop-zone`

Drop zone within drop pane.

`.fsp-drop-pane__icon`

Drop pane icon.

`.fsp-drop-pane__icon--active`

Active drop pane icon.

`.fsp-drop-pane__input`

Drop pane file input.

`.fsp-drop-pane__overlay`

Drop pane overlay.

`.fsp-drop-pane__overlay-box`

Drop pane overlay box.

`.fsp-drop-pane__overlay-header`

Drop pane overlay header.

`.fsp-drop-pane__overlay-icon`

Drop pane overlay icon.

`.fsp-drop-pane__text`

Drop pane text.

`.fsp-drop-pane__upload-progress`

Drop pane upload progress.

`.fsp-dropzone-overlay`

Dropzone overlay.

`.fsp-dropzone-overlay__text`

Dropzone overlay text.

Progress and Status Classes

`.fsp-progress-bar`

Progress bar container.

`.fsp-progress-bar__bar`

Progress bar element.

`.fsp-progress-bar__container`

Progress bar container.

`.fsp-progress`

Alternative progress bar class (legacy).

`.fsp-bar`

Progress bar element (legacy).

`.fsp-loading`

Loading indicator.

`.fsp-loading--fade`

Fade loading animation.

`.fsp-loading--folder`

Folder loading state.

`.fsp-loading-more-indicator`

Loading more indicator.

`.fsp-color--error`

Error color styling.

`.fsp-error-folder`

Error folder styling.

`.fsp-blocked__container`

Blocked state container.

`.fsp-blocked__error`

Blocked error message.

`.fsp-blocked__icon`

Blocked state icon.

`.fsp-blocked__title`

Blocked state title.

Cloud Source Classes

`.fsp-cloud__breadcrumbs`

Cloud breadcrumbs.

`.fsp-cloud__container`

Cloud container.

`.fsp-cloud__files-container`

Cloud files container.

`.fsp-cloud__folder-view`

Cloud folder view.

`.fsp-cloud_view-type`

Cloud view type.

`.fsp-cloud_view-type-icon`

Cloud view type icon.

`.fsp-cloud_view-type-icon-`

Cloud view type icon variant.

`.fsp-cloud-error`

Cloud error styling.

`.fsp-cloud-error__text`

Cloud error text.

`.fsp-source-auth__el`

Source authentication element.

`.fsp-source-auth__wrapper`

Source authentication wrapper.

`.fsp-source-list`

Source list container.

`.fsp-source-list__icon`

Source list icon.

`.fsp-source-list__item`

Source list item.

`.fsp-source-list__item--active`

Active source list item.

`.fsp-source-list__item--disabled`

Disabled source list item.

`.fsp-source-list__label`

Source list label.

`.fsp-source-list__logout`

Source logout button.

`.fsp-source-item`

Individual source item (alternative to source-list__item).

`.fsp-breadcrumb__container`

Breadcrumb container.

`.fsp-breadcrumb__label`

Breadcrumb label.

Transformer and Image Editing Classes

`.fsp-transformer`

Transformer container.

`.fsp-transformer__error`

Transformer error state.

`.fsp-transformer__go-back`

Transformer go back button.

`.fsp-transformer__rotate`

Transformer rotate controls.

`.fsp-transformer__rotate-left`

Rotate left button.

`.fsp-transformer__rotate-right`

Rotate right button.

`.fsp-content--new-transformer`

New transformer content.

URL Source Classes

`.fsp-url-source`

URL source container.

`.fsp-url-source__container`

URL source container wrapper.

`.fsp-url-source__form`

URL source form.

`.fsp-url-source__input`

URL source input field. **Example:**

.fsp-picker .fsp-url-source__input,
.fsp-picker .fsp-url-source__submit-button {
    border: none;
    border-radius: 0;
    height: 30px;
    border-bottom: 1px solid #2e68fb;
}

.fsp-picker .fsp-url-source__input:focus {
    outline: none;
    border: none;
    border-bottom: 1px solid #2e68fb;
}

.fsp-picker .fsp-url-source__submit-button {
    width: 30px;
    border: 1px solid #2e68fb;
    padding: 0;
}

`.fsp-url-source__submit-button`

URL source submit button.

`.fsp-url-source__submit-icon`

URL source submit icon.

Webcam and Video Classes

`.fsp-webcam`

Webcam container.

`.fsp-webcam__container`

Webcam container wrapper.

`.fsp-webcam__image`

Webcam image.

`.fsp-webcam__video`

Webcam video element.

`.fsp-video`

Video container.

`.fsp-video__container`

Video container wrapper.

`.fsp-icon--video-disabled`

Video disabled icon.

`.fsp-icon--video-start`

Video start icon.

`.fsp-icon--video-stop`

Video stop icon.

`.fsp-icon--webcam-disabled`

Webcam disabled icon.

`.fsp-icon--webcam-start`

Webcam start icon.

`.fsp-icon--webcam-stop`

Webcam stop icon.

Image Search Classes

`.fsp-image-search`

Image search container.

`.fsp-image-search__form-container`

Image search form container.

`.fsp-image-search__form-container--results`

Image search form with results.

`.fsp-image-search__results`

Webcam video element.

`.fsp-image-search__submit-icon`

Image search submit icon.

`.fsp-web-search`

Web search container.

`.fsp-search`

Search container.

Unsplash Classes

`.fsp-unsplash_results`

Unsplash results container.

`.fsp-unsplash-is_filled`

Unsplash filled state.

`.fsp-unsplash-logo`

Unsplash logo.

`.fsp-unsplash-source`

Unsplash source.

`.fsp-unsplash-source__container`

Unsplash source container.

`.fsp-unsplash-source__form`

Unsplash source form.

`.fsp-unsplash-subtitle`

Unsplash subtitle.

`.fsp-unsplash-title`

Unsplash title.

Badge and Notification Classes

`.fsp-badge`

Badge container.

`.fsp-badge--bright`

Bright badge variant.

`.fsp-badge--file`

File badge.

`.fsp-badge--source`

Source badge.

`.fsp-notifications`

Notifications container.

`.fsp-notifications__button`

Notification button.

`.fsp-notifications__container`

Notification container.

`.fsp-notifications__header`

Notification header.

`.fsp-notifications__message`

Notification message.

`.fsp-notifications__success`

Success notification.

Utility and State Classes

`.fsp-empty`

Empty state container.

`.fsp-empty__back-button`

Empty state back button.

`.fsp-empty__message`

Empty state message.

`.fsp-file-check-icon`

File check icon.

`.fsp-fileUpload`

File upload container.

`.fsp-footer`

Footer container.

`.fsp-footer__nav`

Footer navigation.

`.fsp-footer__nav--center`

Centered footer navigation.

`.fsp-footer__nav--left`

Left-aligned footer navigation.

`.fsp-footer__nav--right`

Right-aligned footer navigation.

`.fsp-footer--appeared`

Footer appeared state.

`.fsp-footer-text`

Footer text.

`.fsp-text__subheader`

Subheader text.

`.fsp-text__title`

Title text.

`.fsp-custom-auth-bottom__container`

Custom auth bottom container.

`.fsp-custom-auth-top__container`

Custom auth top container.

`.fsp-custom-icon`

Custom icon.

`.fsp-custom-source`

Custom source.

`.fsp-icon`

Base icon class.

`.fsp-icon--`

Icon variant prefix.

`.fsp-icon--auth`

Auth icon.

`.fsp-icon--close-modal`

Close modal icon.

`.fsp-icon--filestack`

Filestack icon.

`.fsp-icon--unsplash-logo`

Unsplash logo icon.

`.fsp-miniuploader-grid`

Mini uploader grid.

`.fsp-miniuploader-grid__file-icon`

Mini uploader file icon.

`.fsp-miniuploader-grid__file-icon-active`

Active mini uploader file icon.

`.fsp-mobile-cam`

Mobile camera.

`.fsp-mobile-menu`

Mobile menu.

`.fsp-picker-miniuploader`

Picker mini uploader.

`.fsp-picker__brand`

Picker brand.

`.fsp-icon--filestack`

Filestack icon.

`.fsp-picker__brand-container`

Picker brand container.

`.fsp-picker__close-button`

Picker close button.

`.fsp-picker__browse`

Picker browse container.

`.fsp-picker__dragdrop`

Picker drag and drop container.

`.fsp-picker__fileinput`

Picker file input container.

`.fsp-picker__services`

Picker services container.

`.fsp-picker__sources`

Picker sources container.

`.fsp-select-labels`

Select labels.

`.fsp-select-labels--active`

Active select labels.

`.fsp-active`

Active state class.

`.fsp-text`

Text element.

`.fsp-msg`

Message element.

`.fsp-info`

Info element.

`.fsp-hint`

Hint element.

`.fsp-tooltip`

Tooltip element.

`.fsp-input`

Input element.

`.fsp-input-group`

Input group container.

Customization Examples

/* Custom modal appearance */
.fsp-picker .fsp-modal {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Custom header styling */
.fsp-picker .fsp-header {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

Example 2: Custom Button Styling

/* Custom primary button */
.fsp-button--primary {
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    border: none;
    border-radius: 25px;
    padding: 12px 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.fsp-button--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

/* Custom cancel button */
.fsp-button--cancel {
    background: transparent;
    border: 2px solid #ddd;
    color: #666;
    border-radius: 20px;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.fsp-button--cancel:hover {
    border-color: #999;
    color: #333;
    background: #f8f9fa;
}

Example 3: Custom Grid Styling

/* Custom grid appearance */
.fsp-grid {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
}

.fsp-grid__cell {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin: 8px;
}

.fsp-grid__cell:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.fsp-grid__cell--selected {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: 2px solid #667eea;
}

Example 4: Custom Drop Zone Styling

/* Custom drop zone */
.fsp-drop-area {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 3px dashed rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    color: white;
    padding: 60px 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.fsp-drop-area:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.fsp-drop-area__title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.fsp-drop-area__subtitle {
    font-size: 16px;
    opacity: 0.8;
}

Example 5: Custom Progress Bar

/* Custom progress bar */
.fsp-progress-bar__container {
    background: #e9ecef;
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
}

.fsp-progress-bar__bar {
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 10px;
    height: 100%;
    transition: width 0.3s ease;
}

Example 6: Dark Theme

/* Dark theme customization */
.fsp-picker {
    background: rgba(0, 0, 0, 0.8) !important;
}

.fsp-modal {
    background: #2c3e50;
    color: white;
}

.fsp-header {
    background: #34495e;
    color: white;
    border-bottom: 1px solid #4a5f7a;
}

.fsp-grid {
    background: #34495e;
}

.fsp-grid__cell {
    background: #4a5f7a;
    color: white;
    border: 1px solid #5a6f8a;
}

.fsp-button--primary {
    background: #3498db;
    color: white;
}

.fsp-button--cancel {
    background: #95a5a6;
    color: white;
    border: none;
}

Example 7: Minimalist Theme

/* Minimalist theme */
.fsp-picker .fsp-modal {
    background: white;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #e0e0e0;
}

.fsp-header {
    background: white;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

.fsp-button {
    background: white;
    border: 1px solid #ddd;
    color: #333;
    border-radius: 0;
    padding: 8px 16px;
}

.fsp-button--primary {
    background: #333;
    color: white;
    border-color: #333;
}

.fsp-grid__cell {
    border: 1px solid #f0f0f0;
    border-radius: 0;
    box-shadow: none;
}