Skip to main content

Documentation Index

Fetch the complete documentation index at: https://formbricks.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

Yes, custom CSS for Website & App Surveys is supported. Use this when the Styling UI is not enough and you need tighter brand control.
Start with the built-in Styling Theme first. Use custom CSS only for advanced overrides.

​
Problem

Website & App Surveys are rendered inside your product, so your app’s global CSS can compete with survey styles. Common examples:
  • A global rule like button { ... !important; } changes survey buttons.
  • Typography resets change survey text spacing and sizing.
  • Utility-heavy global styles create unexpected visual differences between pages.

​
Solution

Scope your overrides to the survey root (#fbjs) and use !important for the exact targets you want to control. This gives you two important guarantees:
  1. Your custom rules apply only to the survey.
  2. Your rules reliably win against conflicting global styles.

​
Add Scoped Overrides In Global CSS

1

Open your global stylesheet

Use the stylesheet that is loaded on pages where surveys are shown (for example globals.css).
2

Add scoped rules under #fbjs

Keep all custom rules prefixed with #fbjs.
3

Use !important only where needed

Add !important to properties that are still being overridden by your app-wide CSS.
globals.css
/* 1) Theme-level variables */
#fbjs {
  --fb-brand-color: #0ea5e9 !important;
  --fb-brand-text-color: #ffffff !important;
  --fb-heading-color: #0f172a !important;
  --fb-subheading-color: #334155 !important;
  --fb-survey-background-color: #ffffff !important;
  --fb-border-radius: 12px !important;
}

/* 2) Targeted component overrides */
#fbjs .button-custom,
#fbjs button.button-custom {
  border: 1px solid #0284c7 !important;
  box-shadow: none !important;
}

#fbjs .label-headline,
#fbjs .label-headline * {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
}

#fbjs .bg-input-bg,
#fbjs .border-input-border,
#fbjs .text-input-text {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
Internal Tailwind utility classes are implementation details and may change over time. Prefer CSS variables and stable survey selectors scoped under #fbjs.

​
Best Practices

  • Keep all survey overrides in one section or file for easier maintenance.
  • Avoid global selectors without #fbjs (for example button, input, p) when styling surveys.
  • Document why each !important exists so future cleanup is easy.
  • After changes, hard refresh your page to clear cached SDK assets.

​
Troubleshooting

My app styles still win over survey styles
  • Increase selector specificity under #fbjs.
  • Add !important only on the conflicting property.
  • Check the browser inspector to confirm which rule is winning.
Survey styles are affecting the rest of my app
  • This usually means a selector is missing #fbjs.
  • Prefix every rule with #fbjs to keep styles isolated.

​
Survey UI CSS Class Reference

The following classes are used by packages/survey-ui and are safe to target when scoped with #fbjs.
CSS classElement(s) it stylesNotes
.button-customSurvey action buttons (submit, CTA, navigation buttons with custom variant)Applies --fb-button-* styling tokens.
.label-headlineQuestion headlines and headline HTML contentUsed by Label variant headline.
.label-descriptionQuestion descriptions and helper copyUsed by Label variant description.
.label-defaultDefault label text contentUsed by Label variant default.
.label-cardUpper labels (for example, required label text)Used by Label variant card.
.progress-trackProgress bar track containerUses --fb-progress-track-* tokens.
.progress-indicatorProgress bar fill indicatorUses --fb-progress-indicator-* tokens.
.rounded-inputInput-like controls (text inputs, dropdown triggers, date inputs, rating/NPS options)Controls input border radius token.
.bg-input-bgInput-like control backgroundsMaps to --fb-input-bg-color.
.border-input-borderInput-like control bordersMaps to --fb-input-border-color.
.text-inputInput-like text sizeMaps to --fb-input-font-size.
.text-input-textInput text and some input iconsMaps to --fb-input-color.
.text-input-placeholderPlaceholder and empty-state textMaps to --fb-input-placeholder-color.
.font-inputInput-like font familyMaps to --fb-input-font-family.
.font-input-weightInput-like font weightMaps to --fb-input-font-weight.
.w-inputInput widthMaps to --fb-input-width.
.min-h-inputInput minimum heightMaps to --fb-input-height.
.px-input-xInput horizontal paddingMaps to --fb-input-padding-x.
.py-input-yInput vertical paddingMaps to --fb-input-padding-y.
.shadow-inputInput shadowMaps to --fb-input-shadow.
.rounded-optionSelect/multi-select/ranking/picture-select option containersControls option border radius token.
.bg-option-bgUnselected option backgroundsMaps to --fb-option-bg-color.
.bg-option-selected-bgSelected option backgroundsUsed for selected states.
.bg-option-hover-bgOption hover backgroundUsed for hover states.
.border-option-borderOption borders and dropdown search dividerMaps to option border token.
.text-optionOption label font sizeMaps to --fb-option-font-size.
.text-option-labelOption label text colorMaps to --fb-option-label-color.
.font-optionOption label font familyMaps to --fb-option-font-family.
.font-option-weightOption label font weightMaps to --fb-option-font-weight.
.px-option-xOption horizontal paddingMaps to --fb-option-padding-x.
.py-option-yOption vertical paddingMaps to --fb-option-padding-y.
.rounded-buttonButton radius (base button component)Maps to --fb-button-border-radius.
.text-buttonButton text sizeMaps to --fb-button-font-size.
.font-button-weightButton font weightMaps to --fb-button-font-weight.
.border-brandSelected/active option bordersUses survey brand color token.