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">
  <div class="input-group-prepend">
    <span class="input-group-text bg-primary tx-white bd-primary"><i class="icon ion-person tx-16 lh-0 op-6"></i></span>
  </div><!-- input-group-prepend -->
  <input type="text" class="form-control bd-primary fc-focus-primary" 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]