Start Free Tier

Styling a Survey

SenseFolks components keep their internal styles inside Shadow DOM. Use the CSS Parts they expose to change the parts you own without depending on private markup.

What You Will Style

  • 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

Start with colour, type, spacing, and focus. A small, consistent layer usually works better than restyling every exposed part.

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;
}

Each survey type exposes its own set of CSS Parts. Check theCSS Parts guidefor the full list, or see individual component references likeFastPoll andPricePoint.

Step 2: Apply Your Brand Colours Consistently

Put reusable colours in CSS custom properties. This keeps the survey and the rest of your product on the same design tokens.

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. Replacesf-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 theprefers-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: var(--color__grey--450);
    color: #ffffff;
  }

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

Step 4: Set Up Accessible Focus States

Never remove a visible keyboard focus indicator. You can change its colour and spacing to fit your brand while keeping it easy to see.

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.

Continue from Here