Default Input Style

Below is the default style for form input in light and dark.

Source Code

<input type="text" class="form-control" placeholder="Enter your name">

Outline Style Input

An input style with border and transaprent background.

Source Code

<input type="text" class="form-control fc-outline" placeholder="Enter your name">
<input type="text" class="form-control fc-outline-dark" placeholder="Enter your name">

Focus Border Color Variant

An input style with colored border when input is in focus.

Source Code

<input type="text" class="form-control fc-focus-success" placeholder="Enter your name">
<input type="text" class="form-control fc-outline-dark fc-focus-success" placeholder="Enter your name">

Class Reference

Class	Value
class="form-control fc-focus-[value]"	primary | success | warning | danger | info | teal | indigo | purple | pink | orange | dark

Input Group Color Variant

An input group style with a combination of utilities classes.

Source Code

<div class="input-group">
  <span class="input-group-addon bg-primary tx-white bd-primary">
    <i class="icon ion-person tx-16 lh-0 op-6"></i>
  </span>
  <input type="text" class="form-control bd-primary fc-focus-primary" placeholder="Username">
</div>

<!-- dark background variant -->
<div class="input-group wd-250">
  <span class="input-group-addon bg-success tx-white brand-success">
    <i class="icon ion-person tx-16 lh-0 op-6"></i>
  </span>
  <input type="text" class="form-control fc-outline-dark bd-success fc-focus-success" placeholder="Username">
</div>

Class Reference

Class	Value
.bd-[value]	primary | success | warning | danger | info | teal | indigo | purple | pink | orange | dark
.bg-[value]
.fc-focus-[value]