Evo

Icon Form

Icon treatments for commonly used form input types and utility classes. Input types include search, URL, email, and password. See the form type page for more information.

search

<input type="search" name="search" placeholder="Evo Search Placeholder" class="evo-form evo-form-padding evo-form-box form-icon-search box-square" />

Add the form-icon-search class to apply this icon.

<input type="search" name="search" placeholder="Evo Search Placeholder" class="evo-form evo-form-padding form-padding-left evo-form-box form-icon form-icon-left form-icon-search box-square" />

Apply the form-padding-left and form-icon-left classes to align the icon to the left side of the field.

URL

<input type="url" name="url" placeholder="Evo URL Placeholder" class="evo-form evo-form-padding evo-form-box form-icon form-icon-arrow" />

Add the form-icon and form-icon-arrow classes to apply this icon.

Email

<input type="email" name="email" placeholder="Evo Email Placeholder" class="evo-form evo-form-padding evo-form-box form-icon form-icon-email" />

Add the form-icon and form-icon-email classes to apply this icon.

<input type="email" name="email" placeholder="Evo Email Placeholder" class="evo-form evo-form-padding evo-form-box form-icon form-icon-chevron" />

Add the form-icon and form-icon-chevron classes to apply this icon. form-icon-triangle will apply the triangle icon.

Password

<input type="password" name="password" placeholder="Evo Password Placeholder" class="evo-form evo-form-padding evo-form-box form-icon form-icon-lock" required />

Add the form-icon and form-icon-lock classes to apply this icon.

<input type="password" name="password" placeholder="Evo Password Placeholder" class="evo-form evo-form-padding evo-form-box form-icon form-icon-eye" required />

Add the form-icon and form-icon-eye classes to apply this icon. form-icon-eye-slash will apply the icon with a slash through it.

Form Icon Utilities

Image background utility classes for forms, to help adjust the positioning and fit of background icons. To adjust icon size, see .

Form Mix

<input type="text" name="text" placeholder="Text Input" class="evo-form padding-10 padding-left-2 evo-box box-0 evo-box-bottom box-bottom-thin box-bottom-gray-14 form-icon form-icon-chevron" />


<input type="url" name="url" placeholder="URL Input" class="padding-10 padding-left-2 evo-box box-0 evo-box-bottom box-bottom-thin box-bottom-gray-14 form-icon form-icon-arrow width-full" />


<div class="evo-position">
<input type="email" name="email" placeholder="Enter email address" class="evo-form evo-form-padding evo-box-top evo-box-left evo-box-right box-top-0 box-left-0 box-right-0 form-icon form-icon-chevron" />
<input type="submit" class="margin-right-5 position-right z-2 ghost-to-ghost-color button-box-none box-0 box-corner width-auto button-padding-thin text-size-8" value=" " />
</div>

A transparent button is in the layer above the form. The chevron is an icon within the form background. The box edges have been removed except for the bottom line.

<div class="evo-position">
<input type="search" id="search" placeholder="Search" class="evo-form evo-form-padding evo-box-bottom box-bottom-thin box-top-0 box-right-0 box-left-0 box-square margin-bottom-3 form-icon form-icon-search" />
</div>
<label class="text-size-3 gray-15 text-tracking-8 text-uppercase" for="search">Enter your search term.</label>

Minimalist search input form with label below acting as instruction.

<div class="evo-position">
<input type="search" name="search" placeholder="Evo Search Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-arrow" />
<input type="submit" class="margin-right-5 position-right z-2 ghost-to-ghost-color button-box-none box-0 box-corner width-auto button-padding-thin text-size-8" value=" " />
</div>

A transparent button is in the layer above the form. The arrow is an icon within the form background.