CSS styling options

Here is a detailed guide for how to style various aspects of the consent collecting widget.

General color inheritance

The text in our widget inherits the color value from higher up in the cascade. This will default to black or what the default value set by the browser is, if a specific value is not defined. This will apply to all elements except when an error occurs. Error-related text will use our default error-color.

If your styles are not applied as you expect, it is likely due to the selector specificity not being high enough. Increasing the specificity will make your styles be applied, instead of our default ones. The following resources cover this in more detail: CSS Specificity (MDN) and the "Specifishity" cheat-sheet.

Font-sizing and line-spacing

You are able to control the font-sizing and line-spacing of our widget. In practice, our widget inherits both font-sizing and line-spacing higher up in the cascade if defined. If no values are defined for font-sizing and line-spacing, both will use our default values.

Styling the border and checkmark of our checkboxes

You can style the border-color of the checkboxes and the color of the checkmark in our widget. To do this, add rules like the following to your stylesheet:

.lm-base .lm-checkbox {
    /* set the color of the checkbox border */
	border-color: #abc123;	
}

.lm-base .lm-checkbox::after {
    /* set the color of the checkmark; inherits from checkbox border if not specified */
    border-color: #abc123;
}

You are free to choose if you want to control both the border-color and checkmark color. If you do not set a value, both will default to use our standard border-color.

Styling error-related text

To change the color of error-related text in the widget, add a rule like this to your stylesheet:

.lm-base .lm-error {
    /* set the color of error-related text, and of invalid/unchecked required fields */
    color: #abc123;
}

Styling the asterisk on required fields

If you have set the markRequiredFields: true option in legal.widget() , you can style the color of the asterisks that are shown after required fields. Add the following rule to your stylesheet:

.lm-base .lm-required-field {
    /* set the color of the asterisks shown after required fields */
    color: #abc123;
}

If you do not specify a color, it will be inherited from our default error-color. If you have overridden that, your specified error-color will be used.