Form Placeholder

evo-form-placeholder

<input type="text" name="text" placeholder="Placeholder Text" class="evo-form evo-form-padding evo-form-box evo-form-placeholder" />
<label>Label</label>

Create an <input> tag and apply the evo-form-placeholder class to it. This covers the color and opacity of the placeholder text. Use evo-form-placeholder-hover to set the effect only on hover, and evo-form-placeholder-focus to set the effect only on focus. Default form styles are set in _evo_variables.scss.

evo-form-placeholder-inverse

<input type="text" name="text" placeholder="Placeholder Text" class="evo-form-inverse evo-form-padding evo-form-box evo-form-placeholder-inverse" />
<label>Label</label>

Create an <input> tag and apply the evo-form-placeholder-inverse class to it. This covers the color and opacity of the placeholder text. Use evo-form-placeholder-hover-inverse to set the effect only on hover, and evo-form-placeholder-focus-inverse to set the effect only on focus. Default form styles are set in _evo_variables.scss.

form-placeholder-color

<input type="text" name="text" placeholder="Placeholder Text" class="evo-form evo-form-padding evo-form-box form-placeholder-color" />
<label>Label</label>

Create an <input> tag and apply the form-placeholder-color class to it. This applies the global evo-color to the placeholder text. Use form-placeholder-color-hover to set the effect only on hover, and form-placeholder-color-focus to set the effect only on focus. Default form styles are set in _evo_variables.scss.

form-placeholder-[status]

<input type="text" name="text" placeholder="Placeholder Text" class="evo-form-inverse evo-form-padding evo-form-box form-placeholder-info" />
<label>Label</label>

Create an <input> tag and apply a form-placeholder-[status] class such as form-placeholder-info. This covers the color of the placeholder text. Use form-placeholder-[status]-hover to set the effect only on hover, and form-placeholder-[status]-focus to set the effect only on focus.

form-placeholder-[neutral]

<input type="text" name="text" placeholder="Placeholder Text" class="evo-form-inverse evo-form-padding evo-form-box form-placeholder-white" />
<label>Label</label>

Create an <input> tag and apply a form-placeholder-[neutral] class such as form-placeholder-white. This covers the color of the placeholder text. Use form-placeholder-[neutral]-hover to set the effect only on hover, and form-placeholder-[neutral]-focus to set the effect only on focus.

form-placeholder-opacity-[number]

Create an <input> tag and apply a form-placeholder-[color] class such as form-placeholder-white. Form placeholder text opacity can be changed with form-placeholder-opacity-[number] classes from 1 to 9, such as form-placeholder-opacity-5. Use form-placeholder-opacity-[number]-hover to set the effect only on hover, and form-placeholder-opacity-[number]-focus to set the effect only on focus.

Form Mix

<input type="text" name="text" placeholder="Placeholder Text" class=" evo-box form-placeholder-black form-placeholder-danger-hover form-placeholder-info-focus form-placeholder-opacity-3-focus" />
<label>Label</label>