Overview
Metronic customizes the Bootstrap Forms
through the SASS variables in
src/sass/components/_variables.scss and adds additonal options for the form elements in src/sass/components/forms/.
Form Control
Use
.form-control-solid class with .form-control to set solid background style for a form control:
<input type="text" class="form-control" placeholder="name@example.com"/>
<input type="text" class="form-control form-control-solid" placeholder="name@example.com"/>
<input type="text" class="form-control form-control-transparent" placeholder="name@example.com"/>Flush Form Control
Use
.form-control-flush class with .form-control to remove the default background-color, borders, and rounded corners of a form input.
<input type="email" class="form-control form-control-flush" placeholder="Example input"/>Form Labels
Use
.required class with .form-label or any custom element to indicate input's mandatory status:
<div class="mb-10">
<label for="exampleFormControlInput1" class="required form-label">Symbol in label</label>
<input type="email" class="form-control form-control-solid" placeholder="Example input"/>
</div>
<div class="mb-10">
<label for="exampleFormControlInput1" class="form-label">Symbol in input</label>
<div class="position-relative">
<div class="required position-absolute top-0"></div>
<input type="email" class="form-control form-control-solid" placeholder="Example input"/>
</div>
</div>Form Select
Use
.form-select-solid class with .form-select to set solid background style for a form select:
<select class="form-select" aria-label="Select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-solid" aria-label="Select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-transparent" aria-label="Select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>Form Range
Use
.form-range class with .form-select to set solid background style for a form select:
<div class="mb-10">
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1" />
</div>
<div class="mb-10">
<label for="customRange1" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="customRange1"disabled />
</div>
2024©
Keenthemes
