Start Free Tier

Styling a Survey

This tutorial shows how to style SenseFolks surveys with CSS Parts so they match your brand and interaction patterns.

What You'll Have When You're Done

  • Surveys styled with your brand colours, fonts, and spacing
  • Dark mode support that follows your users' system preferences
  • Accessible focus states that meet WCAG 2.1 AA requirements

A small amount of styling can make surveys feel native to your product.

Step 1: Style Individual Elements with CSS Parts

SenseFolks surveys use Shadow DOM, which means regular CSS selectors cannot reach internal elements. CSS Parts expose targeted styling hooks.

Use the ::part() pseudo-element to style survey components:

css 
/* Style buttons */
sf-fastpoll::part(button) {
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
}

/* Style headings */
sf-fastpoll::part(heading) {
  font-family: 'Your Brand Font', sans-serif;
  color: #333;
}

Every survey type exposes 40+ CSS Parts. Check the CSS Parts guide for the full list, or see individual component references like FastPoll and PricePoint.

["IMAGE - Side-by-side comparison of a default-styled FastPoll survey and the same survey with custom brand colours and typography applied via CSS Parts."] ["ALT - Side-by-side comparison of a default-styled FastPoll survey and the same survey with custom brand colours and typography applied via CSS Parts."]

Step 2: Apply Your Brand Colours Consistently

Use CSS custom properties to keep your brand colours in one place. Change them once, and every survey on your site updates:

css 
/* Define brand variables */
:root {
  --brand-primary: #007bff;
  --brand-secondary: #6c757d;
  --brand-text: #212529;
}

/* Apply to survey */
sf-fastpoll::part(button) {
  background: var(--brand-primary);
}

sf-fastpoll::part(heading) {
  color: var(--brand-text);
}

sf-fastpoll::part(choice-option):hover {
  border-color: var(--brand-primary);
}

This approach works across all six survey types. Replace sf-fastpoll with sf-pricepoint, sf-userchoice, or any other component tag.

Step 3: Add Dark Mode Support

If your site supports dark mode, your surveys should too. Use the prefers-color-scheme media query to swap colours automatically:

css 
@media (prefers-color-scheme: dark) {
  sf-fastpoll::part(survey-container) {
    background: #1a1a1a;
    color: #ffffff;
  }

  sf-fastpoll::part(input) {
    background: #2d2d2d;
    border-color: #404040;
    color: #ffffff;
  }

  sf-fastpoll::part(button) {
    background: #0d6efd;
  }
}

["IMAGE - A SenseFolks survey shown in both light mode and dark mode, demonstrating how CSS Parts adapt the appearance to match each colour scheme."] ["ALT - A SenseFolks survey shown in both light mode and dark mode, demonstrating how CSS Parts adapt the appearance to match each colour scheme."]

Step 4: Set Up Accessible Focus States

Keep visible focus indicators for keyboard navigation. You can customize default focus styles to match your brand:

css 
sf-fastpoll::part(button):focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

sf-fastpoll::part(input):focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

Use :focus-visible instead of :focus for buttons. It shows the outline only for keyboard navigation, not mouse clicks. For inputs, :focus is usually the right choice.

Next Steps