---
title: "Custom CSS"
description: "Restyle recorder buttons, cards, inputs, dropdowns, media players, waveforms and dialogs to match your own brand."
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.speakai.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS

This guide shows how to customize the appearance of recorder components using simple CSS. You can customize buttons, cards, inputs, dropdowns, media players, waveforms, and dialogs.


***

## What you can customize

You can restyle every recorder element using the following CSS classes:

| **Component** | **CSS Class** | **Description** |
| --- | --- | --- |
| Primary Buttons | **`.sp-custom-primary-btn`** | Start, Stop, Submit, Upload, Record again, etc. |
| Secondary Buttons | **`.sp-custom-secondary-btn`** | Cancel, Back actions |
| Card Containers | **`.sp-custom-card`** | Wrappers for grouped content |
| Input Fields | **`.sp-custom-input`** | Text or password inputs |
| Dropdowns | **`.sp-custom-dropdown`** | Custom select inputs |
| Waveform | **`.sp-custom-waveform`** | Audio waveform visualization |
| Audio Player | **`.sp-custom-audio-player`** | Embedded audio playback controls |
| Video Player | **`.sp-custom-video-player`** | Video playback controls |
| Dialogs | **`.sp-custom-dialog`** | Confirmation or modal windows |
| Titles | **`.sp-custom-`title-\* (1 to 6)** | Title headings (different sizes for h1-h6) |
| Description | **`.sp-custom-`desc** | Recorder Description Text |

***

## How Custom CSS works

The recorder automatically detects and applies your custom CSS rules if you define them using the class names listed above.

- You can override **colors, typography, borders, padding, animation, and shadows**.
- You **don’t need to use `.important`**; the recorder gives your custom classes higher priority.
- Only appearance changes, core functionality remains the same.

***

```text
/* ================================================================
   SPEAK RECORDER – CUSTOM BUTTON STYLES
   This master block includes:
 • Primary & Secondary button styles
 • Hover, Focus, Active and Disabled states
 • Responsive sizing (for mobile / desktop)
 • spacing, and brand-style design
 • Optional shadows and gradient backgrounds
   ================================================================ */

/* Title - Simple Example */
/* This styles the main recorder title (h3 heading level) */
/* Available classes: sp-custom-title-1 through sp-custom-title-6 for different heading sizes */
.sp-custom-title-3 {
  color: #0F0F0F;
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 16px;
}

/* This styles the recorder description text that appears below the title */
.sp-custom-desc {
  color: #666666;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Primary Button - Simple Example */
.sp-custom-primary-btn {
  background-color: #0F0F0F;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sp-custom-primary-btn:hover {
  background-color: #545454;
}

/* Secondary Button - Simple Example */
.sp-custom-secondary-btn {
  background-color: transparent;
  color: #0F0F0F;
  border: 2px solid #0F0F0F;
  border-radius: 8px;
  padding: 10px 22px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sp-custom-secondary-btn:hover {
  background-color: #FAFAFA;
}

/* Card - Simple Example */
.sp-custom-card {
  background-color: #FAFAFA;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Input Field - Simple Example */
.sp-custom-input {
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  padding: 8px 12px;
  background-color: white;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #0F0F0F;
}

.sp-custom-input:focus {
  border-color: #0F0F0F;
  outline: 2px solid rgba(15, 15, 15, 0.2);
  outline-offset: 2px;
}

/* Dropdown - Simple Example */
.sp-custom-dropdown {
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  background-color: white;
  font-family: 'Poppins', sans-serif;
}

.sp-custom-dropdown:focus {
  border-color: #0F0F0F;
  outline: 2px solid rgba(15, 15, 15, 0.2);
  outline-offset: 2px;
}

/* Waveform - Simple Example */
.sp-custom-waveform {
  background-color: #FAFAFA;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  height: 80px;
  width: 100%;
}

/* Audio Player - Simple Example */
.sp-custom-audio-player {
  width: 100%;
  height: 40px;
  border-radius: 4px;
}

/* Video Player - Simple Example */
.sp-custom-video-player {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background-color: #000000;
}

/* Dialog - Simple Example */
.sp-custom-dialog {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
```

***

## Best practices for writing your CSS

Use these guidelines to avoid common issues when creating your own styles.

- **Target the provided classes**: Use the specific custom classes (\`.sp-custom-primary-btn\`, \`.sp-custom-secondary-btn\`, etc.) instead of very broad selectors like \`button { … }\`, so you only affect recorder components.
- **Test in light and dark themes**: Choose colors with enough contrast so text remains readable on both light and dark backgrounds.
- **Always define hover and focus states**: This improves clarity and keyboard accessibility.
- **Design clear disabled buttons**: Disabled buttons should look different and clearly non-clickable.
- **Use transitions sparingly**: Small transitions (0.2 to 0.3s) are usually enough and keep the interface feeling fast.
- **Avoid rules that break functionality**: Do not hide components or block interactions.

Avoid rules that break functionality, like hiding buttons or blocking clicks:

```text
/* Avoid this – it breaks the UI */
.sp-custom-primary-btn {
  display: none;
  pointer-events: none;
}
```

***

## Troubleshooting your custom CSS

If your styles do not look right, try these checks:

- **Make sure the selector name is spelled exactly**: \`.sp-custom-primary-btn\`, \`.sp-custom-secondary-btn\`, \`.sp-custom-card\`, \`.sp-custom-input\`, \`.sp-custom-dropdown\`, \`.sp-custom-waveform\`, \`.sp-custom-audio-player\`, \`.sp-custom-video-player\`, or \`.sp-custom-dialog\`.
- Check for missing semicolons **`;`** or braces **`}`** in your CSS.
- If some default styling still appears, try setting all related properties explicitly (background, border, padding, font, etc.) in your rule.
- Refresh your page without cache (for example, Ctrl+Shift+R or Cmd+Shift+R) to be sure you see the latest changes.

If problems continue, share your CSS and a screenshot with support so they can help you adjust the rules without changing your integration.

### Overview

By default, text fields in the recorder might automatically capitalize the first letter of your input. This can be inconvenient for fields like notes or custom questions where you need precise control over capitalization.

This guide shows you how to disable this automatic capitalization for specific input fields, giving you more flexibility when entering information.

### How It Works

You can control the auto-capitalization behavior using Custom CSS. By adding a specific code snippet to your recorder settings, you instruct the browser not to force capitalization on text inputs.

Keep in mind that while this CSS will prevent the browser from automatically capitalizing text, some mobile keyboards may still default to capitalizing the first letter. This behavior is typically controlled by the user's device settings.

### Getting Started

To access this feature, go to [Recorder → Settings](/help/recorder/custom-css/) in your dashboard.

### Configuration

Follow these steps to disable auto-capitalization:

1. Navigate to **Recorder** > **Settings**.
1. Scroll down to the **Custom CSS** section.
1. Add the following CSS code:

```css
   input, textarea {
   text-transform: none .important;
   }
```
1. **Save** your settings.

### Next Steps

Ready to get started?

- **Login to your account** and navigate to the Recorder settings.
- **Add the Custom CSS** provided in this guide.
- **Save your changes** and test it out on your input fields.

Need help? Contact our support team or check out our other guides.

Want a hand setting this up? [Book a free consult](https://calendly.com/speak-ai/consult?utm_source=docs&utm_campaign=consult) and we'll do it together on your account.

---
Related: [Embeddable recorder](/help/recorder/) · [Browser support](/help/recorder/browser-support/)

Source: https://docs.speakai.co/help/recorder/custom-css/index.mdx