Form Background

evo-form-bg

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

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

evo-form-bg-inverse

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

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

form-bg-color

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

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

form-bg-[status]

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

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

form-bg-[neutral]

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

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

form-bg-opacity-[number]

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

Form Mix

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