Better default styles for common input elements.

  • By Tobias Reich
  • Last update: Dec 20, 2022
  • Comments: 5

formbase

Dependencies Donate via PayPal

Better default styles for common input elements.

formbase

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…

<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:

$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';

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.

Github

https://github.com/electerious/formbase

Comments(5)

  • 1

    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.

  • 2

    Dynamically sized select tick

    Sorry, i'm too lazy to make a pull request for the following detail.

    The .select class uses background-size to size the SVG tick. Use .8rem instead of 12px for a more flexible styling.

    BTW i really like this project. It provides a very good styling with minimal foot print.

    cheers.

  • 3

    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.

  • 4

    Bump rosid-handler-sass from 7.0.0 to 8.0.0

    Bumps rosid-handler-sass from 7.0.0 to 8.0.0.

    Changelog

    Sourced from rosid-handler-sass's changelog.

    [8.0.0] - 2020-11-30

    Changed

    Commits
    • d075ed2 8.0.0
    • 85089dc Updated changelog
    • 7808272 Add comment about sync method
    • 488e5bb Switch to sass.renderSync because it's faster
    • 70e09f0 Switch to async version
    • 32cb6e2 Small adjustment
    • e563856 Merge pull request #44 from bratteng/feature/use-dart-sass
    • 85805ae sass sourceMap options has to be either string or true with a outFile
    • 8c40bc5 Replace node-sass with sass (dart-sass)
    • 8cb6a3c Use fs.promises
    • Additional commits viewable in compare view

    Dependabot compatibility score

    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 rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will 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 version will 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 dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • 5

    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/initial branch, 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 greenkeeper/.

    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/initial branch 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.

Popular Tag

Related