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.
|Default||Includes all features.||Try it on CodePen|
- Works in all modern browsers and IE11
- Works with inputs, textareas, selects, checkboxes and radio buttons
- Consistent styling across browsers
- Zero dependencies
We recommend installing formbase using npm or yarn.
npm install formbase
yarn add formbase
Include the CSS file in the
<link rel="stylesheet" href="dist/formbase.min.css">
…or import the SASS file directly:
<input class="input" type="text">
<textarea class="input" rows="8" cols="40"></textarea>
<select class="select"> <option selected disabled>-</option> <option value="one">One</option> <option value="two">Two</option> </select>
<div class="control"> <input class="control__input" id="Radio" type="radio"> <label class="control__label" for="Radio">Radio</label> </div>
<div class="control"> <input class="control__input" id="checkbox" type="checkbox"> <label class="control__label" for="checkbox">Checkbox</label> </div>
src/styles/main.scss directly to customize the look of formbase:
$formbase__prefix: ''; // Class name prefix $formbase__margin: .9rem; // Margin $formbase__padding: .6rem; // Padding $formbase__select_size: 12px; // Size of the select arrow $formbase__control_size: 20px; // Size of the checkbox and radio button (1) $formbase__radius: 0; // Input border radius $formbase__svg: #000; // Hex color for svgs (2) $formbase__color: #000; // Input and label color $formbase__placeholder: #999; // Input placeholder color $formbase__background: #fff; // Background color $formbase__border: #bbb; // Border color $formbase__active: #17f; // Active highlight color $formbase__shadow: inset 0 1px 3px rgba(0, 0, 0, .05); // Shadow styling $formbase__duration: .3s; // Transition duration $formbase__timing: ease; // 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 @import 'src/styles/main';
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.
Add color variable to specify color from input and select
First of all many thanks for the small but useful library.
My changes adds the options for an input or select to define a color.
I didn't recompile the files, so the changes are just made in the source.
I'm looking forward to your feedback.
Dynamically sized select tick
Sorry, i'm too lazy to make a pull request for the following detail.
background-sizeto size the SVG tick. Use
12pxfor a more flexible styling.
BTW i really like this project. It provides a very good styling with minimal foot print.
Add not-allowed cursor to disabled fields
Just 0.3 kb more and improves the UX by changing the cursor on disabled elements. Specially on bad/old displays the grey may not be displayed correctly.
Bump rosid-handler-sass from 7.0.0 to 8.0.0
Bumps rosid-handler-sass from 7.0.0 to 8.0.0.
Sourced from rosid-handler-sass's changelog.
7808272Add comment about sync method
488e5bbSwitch to sass.renderSync because it's faster
70e09f0Switch to async version
e563856Merge pull request #44 from bratteng/feature/use-dart-sass
85805aesass sourceMap options has to be either string or true with a outFile
8c40bc5Replace node-sass with sass (dart-sass)
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebasewill rebase this PR
@dependabot recreatewill recreate this PR, overwriting any edits that have been made to it
@dependabot mergewill merge this PR after your CI passes on it
@dependabot squash and mergewill squash and merge this PR after your CI passes on it
@dependabot cancel mergewill cancel a previously requested merge and block automerging
@dependabot reopenwill reopen this PR if it is closed
@dependabot closewill close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major versionwill close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor versionwill close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependencywill close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Action required: Greenkeeper could not be activated 🚨
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the
greenkeeper/initialbranch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the
greenkeeper/initialbranch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.