CSS Customization Reference

For most visual customization needs, use the Branding & Styling tab — it covers colors, fonts, logo, field style, and button appearance without writing any code. Use CSS only when you need to go beyond what the Styling tab offers.

To inject CSS, add a <style> block in the Head code panel of the Custom code tab. See Custom Code for details.

📘
CSS changes apply to the live Privacy Center page and are not reflected in the builder preview. Always test on the draft version before publishing.

Page structure

Selector	What it targets
`body`	The full page background
`.app__header`	The hero block at the top of the form
`.app__content`	The white form card container
`.app__footer`	The footer area below the form

Header

Selector	What it targets
`.form__company-icon`	The company logo image
`.form__title`	The form title text
`.form__subtitle`	The form description/subtitle text

Form fields and labels

Selector	What it targets
`.form__label`	Field labels above inputs
`.form__details`	The form fields section below the rights selector
`.form__custom-question-title`	Labels on custom elements
`.input__header`	Input field header label
`.dropdown__header`	Dropdown field header label
`.file__title`	File upload field label

Input fields

Selector	What it targets
`.input__element`	Text input fields
`input.input__element:focus`	Text input on focus
`input.input__element:hover`	Text input on hover
`.input__error`	Validation error message below inputs
`.input__element::placeholder`	Placeholder text in inputs

Dropdowns

Selector	What it targets
`.dropdown__wrapper`	Dropdown container
`.dropdown__wrapper:focus`	Dropdown on focus
`.dropdown__placeholder`	Dropdown placeholder text
`.dropdown__option`	Individual dropdown option
`.dropdown__option:hover`	Dropdown option on hover
`.dropdown__option--active`	Currently selected dropdown option

Privacy rights cards

Selector	What it targets
`.form__rights`	The rights card container
`.form__request-type`	The rights selection section
`.form__request-item`	Individual right card
`.form__radio-hidden:checked + .form__request-item`	Selected right card state
`.form__request-item-title`	Right card title text
`.form__request-item-subtitle`	Right card subtitle/description text

Submit button

Selector	What it targets
`.button-primary`	The Submit button
`.button-primary span`	Submit button text
`.button-primary:hover:not(.button-primary__disabled)`	Submit button hover state

Confirmation screen

The screen shown after a data subject successfully submits a request.

Selector	What it targets
`.sent__title`	The confirmation screen title

Example

Here's a starting point you can paste into the Head code panel and adapt:

<style>
  /* Background */
  body { background: #f9f9f9; }
  .app__header { background: #1a1a2e; }

  /* Logo */
  .form__company-icon { width: 120px; height: 60px; object-fit: contain; }

  /* Title and text */
  .form__title { color: #1a1a2e; }
  .form__subtitle { font-size: 16px; color: #555; }

  /* Labels */
  .form__label,
  .form__custom-question-title { color: #333; font-weight: 600; }

  /* Input fields */
  .input__element,
  .dropdown__wrapper { border-color: #ccc; border-radius: 8px; }
  .input__element:focus,
  .dropdown__wrapper:focus { border-color: #6c63ff; }

  /* Submit button */
  .button-primary { background-color: #6c63ff; border-radius: 50px; }
  .button-primary span { color: #fff; }
  .button-primary:hover:not(.button-primary__disabled) { background-color: #574fd6; }

  /* Rights cards */
  .form__radio-hidden:checked + .form__request-item { border: 2px solid #6c63ff; }
</style>