akero form css

akero-form-css.md

The form is wrapped in an akHTMLForm class to prevent site styles interfering with form styles so each rule will need to be prepended with a stacked class of .akHTMLForm.akHTMLForm to override the original stylesheet

Labels

.akHTMLForm.akHTMLForm label {}

Pre & Post Text

Helper text that appears above and below the input

.akHTMLForm.akHTMLForm .ak-pre-text {}

.akHTMLForm.akHTMLForm .ak-post-text {}

Inputs

Text/Text Area

.akHTMLForm.akHTMLForm .ak-control {}

All text inputs have the class of .ak-control if you need to target a textarea differently then .akHTMLForm.akHTMLForm textarea.ak-control as a rule will suffice

Checkbox & Radio Buttons

We use a replacement element to style the radio and checkbox elements differently.

The markup for this is as follows:

Radios

Markup

  <div class="ak-radios">
	  <!-- Start Radio Button -->
    <label class="ak-radio">
      <span class="ak-radio__input">
        <!-- Hidden via CSS -->
        <input type="radio">  
        <!-- New element styled via CSS -->
        <span class="ak-radio__replacement"></span>
      </span>
      <span class="ak-radio__body">
        Text for radio button
      </span>
    </label>
	  <!-- End Radio Button -->
  </div>

CSS

/* The label element that wraps each radio */
.akHTMLForm.akHTMLForm .ak-radio {}

/* The actual Radio Button */
.akHTMLForm.akHTMLForm .ak-radio__replacement {
  border-radius: 50%;
  display: flex;
}
/* Inner circle of radio */
.akHTMLForm.akHTMLForm .ak-radio__replacement:before {
  /* Current Styles */
  content: ' ';
  display: block;
  width: .5rem;
  height: .5rem;
  margin: auto;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0;
  transition: .2s;
}

/* Checked Radio */
.akHTMLForm.akHTMLForm .ak-radio__input input:checked ~ .ak-radio__replacement {
  background-color: rgb(2, 173, 255);
}
.akHTMLForm.akHTMLForm .ak-radio__input input:checked ~ .ak-radio__replacement:before {
  opacity: 1;
}

Checkboxes

Markup

  <div class="ak-checkboxes">
	  <!-- Start Checkbox -->
    <label class="ak-checkbox">
      <span class="ak-checkbox__input">
        <!-- Hidden via CSS -->
        <input type="checkbox">  
        <!-- New element styled via CSS -->
        <span class="ak-checkbox__replacement"></span>
      </span>
      <span class="ak-checkbox__body">
        Text for radio button
      </span>
    </label>
	  <!-- End Checkbox -->
  </div>

CSS

/* The label element that wraps each checkbox */
.akHTMLForm.akHTMLForm .ak-checkbox {} 

/* The actual checkbox */
.akHTMLForm.akHTMLForm .ak-checkbox__replacement {}
/* Checkmark in replacement element */
.akHTMLForm.akHTMLForm .ak-checkbox__replacement:before {
	/* Current Styles are */
	content: ' ';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3E%3Cpath d="M6 10L2.5 6.5l-2 2L6 14l9.5-9.5-2-2L6 10z" fill="%23ffffff"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto .75rem;
  opacity: 0;
  transition: .2s;
}

/* Checked checkbox */
.akHTMLForm.akHTMLForm .ak-checkbox__input input:checked ~ .ak-checkbox__replacement {
  background-color: rgb(2, 173, 255);
}
.akHTMLForm.akHTMLForm .ak-checkbox__input input:checked ~ .ak-checkbox__replacement:before {
  opacity: 1;
}

Buttons

.akHTMLForm.akHTMLForm .ak-btn, 
.akHTMLForm.akHTMLForm .ak-submit {}

Buttons are styled with the above classes, with the submit button using .ak-submit

Small Print (After Form)

Uses same as post text class, but has a wrapper element around it, so if you need to target just this text you can use the wrapper element before it.

.akHTMLForm.akHTMLForm .ak-after-form .ak-post-text {}