Form Styles

Prepend & Append

Content can be appended or prepended to form fields using the .append and .prepend class, respectively.

Each form item must be wrapped in a div with either the .append or .prepend class. A <span> class with class .adjoined should then be added before the input or after the input, depending on if you are appending or prepending.

Inside of the .adjoined class, you can add text or icons. Just make sure that if you are adding an icon, you put it inside a new <span> tag, not the one containing the .adjoined class.

Lastly, if you want your appended or prepended content to not have a background color, simply add the class .transparent to either the .append or .prepend class.

This add-on requires the breakpoint() mixin in order for the SASS or LESS files to compile without modification.

The icons used here are from a modified version of the Font Awesome icon font library.

<form class="form-inline border-radius">
  <div class="form-item prepend">
    <label for="name">Name:</label>
    <span class="adjoined"><span class="icon user"></span></span>
    <input type="text" name="name" placeholder="John Doe" />
  </div>

  <div class="form-item append">
    <label for="email">Email:</label>
    <input type="email" name="email" placeholder="john_doe@example.com" />
    <span class="adjoined"><span class="icon envelope"></span></span>
  </div>

  <div class="form-item append transparent">
    <label for="email">Website:</label>
    <input type="website" name="website" placeholder="http://example.com" />
    <span class="adjoined"><span class="icon globe"></span></span>
  </div>
</form>

Download