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>

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

// 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 {}
}