🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%


Edit the 📁 custom-style/_forms.scss file to create your custom form elements.

To help you customize your form elements, CodyFrame includes the following CSS custom properties:

:root {
  --form-control-padding-x: var(--space-sm);
  --form-control-padding-y: var(--space-xs);
  --form-control-radius: 0.25em;

The .form-control class applies the basic style to all form elements. To highlight invalid form inputs, you can target the aria-invalid attribute, while the disabled (or readonly) attribute is used to target disabled form elements:

Class Description
.form-control basic style of all form elements
.form-control[aria-invalid="true"] highlight form element where value entered is invalid
.form-control[disabled] target disabled form elements
.form-control[readonly] target disabled form elements

Other form classes:

Class Description
.form-legend <legend> element
.form-label <label> element

Fork the pen below or use the Forms Editor to create your custom form style:

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us