formbase

Better default styles for common input elements.

formbase eliminates cross browser bugs, inconsistencies across systems and applies a beautiful default styling to several input elements.

Contents

• Demos
• Features
• Setup
• Usage
• Options
• Semver strategy

Demos

Name	Description	Link
Default	Includes all features.	Try it on CodePen

Features

• Works in all modern browsers and IE11
• No JavaScript, just CSS
• Works with inputs, textareas, selects, checkboxes and radio buttons
• Consistent styling across browsers
• Zero dependencies

Setup

We recommend installing formbase using npm or yarn.

npm install formbase

yarn add formbase

Include the CSS file in the head…

<link rel="stylesheet" href="dist/formbase.min.css">

…or import the SASS file directly:

@import 'src/styles/main';

Usage

Input

<input class="input" type="text">

Textarea

<textarea class="input" rows="8" cols="40"></textarea>

Select

<select class="select">
	<option selected disabled>-</option>
	<option value="one">One</option>
	<option value="two">Two</option>
</select>

Radio

<div class="control">
	<input class="control__input" id="Radio" type="radio">
	<label class="control__label" for="Radio">Radio</label>
</div>

Checkbox

<div class="control">
	<input class="control__input" id="checkbox" type="checkbox">
	<label class="control__label" for="checkbox">Checkbox</label>
</div>

Options

Import src/styles/main.scss directly to customize the look of formbase: