Active Field

Use the active-field module to apply custom styling to focused and/or nonempty form fields.

Examples

Basic

Input Label

Select Label

Textarea Label

<div class="form">
  <div class="js-active-field form__item active-field">
    <label class="form__label active-field__label">Input Label</label>
    <div class="form__field active-field__field">
      <input type="text" name="test_input">
    </div>
  </div>
  <div class="js-active-field form__item active-field">
    <label class="form__label active-field__label">Select Label</label>
    <div class="form__field active-field__field">
      <select name="test_select" class="js-select" data-select-type="hide-first">
        <option value=""></option>
        <option value="option-1">Option 1</option>
        <option value="option-2">Option 2</option>
        <option value="option-3">Option 3</option>
      </select>
    </div>
  </div>
  <div class="js-active-field form__item active-field">
    <label class="form__label active-field__label">Textarea Label</label>
    <div class="form__field active-field__field">
      <textarea name="test_textarea"></textarea>
    </div>
  </div>
</div>