Overview
Craft 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/
.
Use .form-control-solid
class with .form-control
to set solid background style for a form control:
Use .form-control-flush
class with .form-control
to remove the default background-color, borders, and rounded corners of a form input.
Use .required
class with .form-label
or any custom element to indicate input's mandatory status:
Use .form-select-solid
class with .form-select
to set solid background style for a form select:
Default select
Open this select menu
One
Two
Three
Solid background style
Open this select menu
One
Two
Three
Transparent background style
Open this select menu
One
Two
Three
copy <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>
Use .form-range
class with .form-select
to set solid background style for a form select: