Start Free Tier

Styling a Survey

Use CSS Parts to style SenseFolks surveys. Apply your colours, fonts, and spacing without changing component internals.

1. Target a CSS Part

Shadow DOM blocks ordinary CSS selectors. Target exposed parts with ::part():

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

Find supported parts in the CSS Parts guide and component references, including FastPoll and PricePoint.

2. Apply brand colours

Reuse your product's colour variables:

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

Use the matching survey tag and check that it exposes each part you target.

3. Add Dark Mode Support

Use prefers-color-scheme to follow the system theme:

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

4. Style keyboard focus

Keep keyboard focus visible when changing colours and spacing.

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 for a focus ring when the browser determines it is needed, such as during keyboard navigation.

Related guides