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
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
…
…or import the SASS file directly:
;
Usage
Input
Textarea
Select
- One Two
Radio
Radio
Checkbox
Checkbox
Options
Import src/styles/main.scss
directly to customize the look of formbase:
; // Class name prefix ; // Margin ; // Padding ; // Size of the select arrow ; // Size of the checkbox and radio button (1) ; // Input border radius ; // Hex color for svgs (2) ; // Input and label color ; // Input placeholder color ; // Background color ; // Border color ; // Active highlight color ; // Shadow styling ; // Transition duration ; // Transition timing // (1) It's recommended to use an absolute unit (px) for the control size to avoid half pixels. Half pixels can transform the circle of the radio control into an egg. // (2) Only works with hex values ;
Semver strategy
Any change to CSS rules whatsoever is considered backwards-breaking and will result in a new major release. Others changes with no impact on rendering are considered backwards-compatible and will result in a new patch release. No changes to CSS rules can add functionality in a backwards-compatible manner, therefore no changes are considered minor.