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>