🎉 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.

🔍 On this page:

  1. Main style
  2. Custom Radio/Checkbox buttons
  3. Custom select

Main Style #

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:

If you want to create fixed-sized input variations (e.g., a .form-control element with a height equal to 40px), you can create class modifiers that set the desired size:

/* 👇 example: custom height utility classes */
.height-30, .height-40, .height-50 {
  height: var(--height);

  &.btn, &.form-control {
    line-height: var(--height);
    padding-top: 0;
    padding-bottom: 0;

.height-30 { --height: 30px; }
.height-40 { --height: 40px; }
.height-50 { --height: 50px; }

/* 👇 example: custom width utility classes */
.width-40, .width-120 {
  width: var(--width);

  &.btn {
    padding-left: 0;
    padding-right: 0;

.width-40  { --width: 40px; }
.width-120 { --width: 120px; }

Here's a live example:

Custom radio/checkbox buttons #

To replace the native radio/checkbox buttons with custom ones, import the Radio Checkbox Buttons component.

Custom Select #

To replace the native select element with a custom one, import the Custom Select component.

✅ Project duplicated

✅ Project created

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