Adding custom CSS to a calculator

Learn how to use custom CSS to customize a calculator even more

When you embed a calculator on your website it will adapt to your current stylesheet (CSS). This means that it will "copy" styles like font family, font sizes, form styles and layout and line heights. Sometimes you just want to do some style change to make it look better. Other times you maybe want to manipulate the CSS a lot to make the calculator match your brand. This article will help you with doing so.

How to add stylesheet changes to your website?

How to add stylesheet changes really depends on what website builder you are using. If you don't know how, please visit the docs of your website builder. As a final resort you can add the changes directly above the place on your website where your pasted the embed code:

<!-- You can add styles directly above the embed code -->
<style>
  .cc {
    font-size: 125%; // This increases all calculator fonts by 25%
  }
</style>

Examples

Changing the font styles of the calculator

Change the body font styles

.cc {
  font-family: Georgia;
  font-size: 1.25rem;
  font-weight: 300;
  color: #444;
}

Change the title font styles

.cc__element-title {
  font-family: Helvetica;
  font-weight: 200;
  color: #111;
}

Change the description font styles

.cc__element-description {
  font-family: Helvetica;
  font-weight: 200;
  font-style: italic;
}

Change formula titles and descriptions

.cc__formula-title {
  font-family: Helvetica;
  font-weight: 200;
}

.cc__formula-description {
  font-family: Helvetica;
  font-weight: 200;
  font-style: italic;
}

Change question titles and descriptions

.cc__question-title {
  font-family: Helvetica;
  font-weight: 200;
}

.cc__question-description {
  font-family: Helvetica;
  font-weight: 200;
  font-style: italic;
}

Change title font sizes

Note that you shoudn't apply a rule on cc__element-title, because the tag names (h1, h2, h3, h4, h5, h6, p) could be unique and you use the vertical flow

.cc h1 {
  font-size: 3rem;
}

.cc h2 {
  font-size: 2.5rem;
}

.cc h3 {
  font-size: 2rem;
}

.cc h4,
.cc h5,
.cc h6 {
  font-size: 1.5rem;
}

.cc p.cc__element-title {
  font-size: 1.25rem;
  font-weight: 200;
}

Change the background color of the callouts (boxes that appear after submission)

.cc__callout.success {
  background-color: #00b894;
  border-color: #00b894;
}

.cc__callout.alert {
  background-color: #d63031;
  border-color: #d63031;
}

CSS rules

Here you can find all CSS rules you can use in a calculator:

// Namespace (use this to scope rules)
.cc {}

// Flexbox container
.cc__flex-container

// Flexbox column
.cc__box {}

// Element class names (apply to both questions and formulas)
.cc__element-title {}
.cc__element-description {}

// Range question type
.cc__question {}
.cc__range-question-wrapper {}
.cc__question-title {}
.cc__range-question {}
.cc__range-question-value {}
.cc__range-question-min {}
.cc__range-question-max {}

// Number question type
.cc__question {}
.cc__number-question-wrapper {}
.cc__question-title {}
.cc__number-question {}
.cc__number-question-input {}

// Number incrementer question type
.cc__question {}
.cc__numberIncrementer-question-wrapper {}
.cc__question-title {}
.cc__numberIncrementer-question {}
.cc__number-question-input {}

// Radio question type
.cc__question {}
.cc__radio-question-wrapper {}
.cc__question-title {}
.cc__radio-question {}
.cc__radio-question-item {}
.cc__radio-question-item-label {}
.cc__radio-question-item {}
.cc__radio-question-item-label {}

// Multiple select (checkbox) question type
.cc__question {}
.cc__checkbox-question-wrapper {}
.cc__question-title {}
.cc__checkbox-question {}
.cc__radio-question-item {}
.cc__radio-question-item-label {}

// Select question type
.cc__question {}
.cc__select-question-wrapper {}
.cc__question-title {}
.cc__select-question {}

// Switch question type
.cc__question {}
.cc__switch-question-wrapper {}
.cc__switch-question {}
.cc__question-title {}

// Checkbox question type
.cc__question {}
.cc__checkbox-question-wrapper {}
.cc__checkbox-question {}
.cc__question-title {}
.cc__question {}

// Text question type
.cc__text-question-wrapper {}
.cc__question-title {}
.cc__text-question {}

// Email question type
.cc__question {}
.cc__email-question-wrapper {}
.cc__question-title {}
.cc__email-question {}

// Separator question type
.cc__question {}
.cc__separator-question-wrapper {}
.cc__question-title {}
.cc__separator-question {}

// Order List question type
.cc__question {}
.cc__orderList-question-wrapper {}
.cc__question-title {}
.cc__orderList-question {}
.cc__orderList-question-item {}
.cc__orderList-question-item-name {}
.cc__orderList-question-item-value {}

// Place question type
.cc__question {}
.cc__place-question-wrapper {}
.cc__question-title {}
.cc__place-question {}

// Places question type
.cc__question {}
.cc__places-question-wrapper {}
.cc__question-title {}
.cc__places-question {}

// Date question type
.cc__question {}
.cc__date-question-wrapper {}
.cc__question-title {}
.cc__date-question {}

// Time Question type
.cc__question {}
.cc__time-question-wrapper {}
.cc__question-title {}
.cc__time-question {}

// Dates question type
.cc__question {}
.cc__dates-question-wrapper {}
.cc__question-title {}
.cc__dates-question {}

// File question type
.cc__question {}
.cc__file-question-wrapper {}
.cc__question-title {}
.cc__file-question {}


// Formula with number (Float) as result
.cc__formula {}
.cc__formula-title {}
.cc__formula-result {}
.cc__formula-result-prefix {}
.cc__formula-result-value {}
.cc__formula-result-suffix {}

// Formula with text (String) as result
.cc__formula {}
.cc__formula-title {}
.cc__formula-result {}
.cc__formula-result-text {}

// Button
.cc__button {}
}

    ConvertCalculator is a powerful calculator form builder for your website