Form select
Replace the default select form with your own HTML content, like a button or text.
Usage
To apply this component, just add the .f-form-select
class and the data-f-form-select
attribute to a container element around a span and a <select>
element. Basically, this will overlay the default select element with a custom FatKit form.
info To use this component you will need to uncomment the Sass include at the bottom of the /assets/styles/sass/elements/_form.scss
file.
Example
Markup
<div class="f-form-select" data-f-form-select>
<span></span>
<select>
<option value="">...</option>
<option value="">...</option>
</select>
</div>
As a button
Add the .f-btn
class to the container element to style it as a button.
Markup
<div class="f-btn f-form-select" data-f-form-select>...</div>
As an anchor
You can use any element, like an <a>
as a select form. Just add the {target:'a'}
option to the data-f-form-select
attribute and use an <a>
instead of a <span>
element.
Example
Markup
<div class="f-form-select" data-f-form-select="{target:'a'}">
<a></a>
<select>...</select>
</div>